Media API (Буферизация)
С данным недугом столкнулся в хроме (версия 46).
var audio = new Audio(); audio.src = "ссылка на файл mp3"; audio.load(); audio.play();//Этот метод срабатывает по событию canplay Так вот, запускаю я этот код и все работает правильно. После того как вся песня была загружена в буфер, что я проверил через audio.buffered... Я по событию onclick перемотал песню назад при помощи свойства audio.currentTime. Песня то перемоталась, вот только браузер отправил повторный запрос на сервер (хотя ведь данные уже в буфере) и начал по новой грузить данные начиная с определенных бит (по заголовку Range: bytes=). И при каждой перемотке браузер шлет новые запросы. Почему он это делает и как избавиться от этого? |
А на чём был сделан клик с целью перемотки? (Желательно увидеть более полный код.) Может в этот момент вся страница перезагружается?
|
Опан,
Нет, страница не перезагружается. КЛик был осуществлен просто по блоку <span> на который я повесил это событие, а в него был передан объект audio. Как я уже описывал, все работает, вот только браузер нагло шлет запрос за запросом при перемотки (страница точно не перезагружается) |
У меня этого не происходит. Такой же хром, будем думать ещё.
|
Цитата:
Здесь беда в неправильной загрузке файла, а как правильно кто знает, читал у микрософта - есть всё, можно библиотеку не скачивать, а этот нюанс не описан. Может у кого есть кусок кода правильной буферизации? |
я пытался по аналогии с микрософтовской инструкцией сделать собственную библиотеку.
Всё хорошо, но вышеописанная беда - без перезагрузки перемотка не работает:no: приведу код - он простой var audio=new Audio();//Создаём новый элемент Audio audio.volume=0.85; var vol=audio.volume; var ctxvol=apvolcanvas.getContext("2d"); var k; if(audio!=null && audio.canPlayType && audio.canPlayType("audio/ogg")){k=2;audio.type="audio/ogg"; }else{ if(audio!=null && audio.canPlayType && audio.canPlayType("audio/mpeg")){k=1;audio.type="audio/mpeg"; }else{alert('Ваш браузер не поддерживает mp3!');} } ap_c.innerHTML=ap_sound.dataset.caption; //************** var getSrcFlag=0; function getSrc(){ getSrcFlag=1; if(ap_sound.dataset.name!=""){ file="n="+ap_sound.dataset.name; }else{if(k==1){file="id="+ap_sound.dataset.mp3;}el se{file="id="+ap_sound.dataset.ogg;}} i=ap_sound.dataset.file+".php?k="+k+"&"+file; audio.src="/s/"+ap_sound.dataset.file+".php?k="+k+"&"+file;//просто файл песни audio.load(); } //************** //кнопки управления applay.onclick=function(e){ if(!getSrcFlag){getSrc()} audio.play(); applay.style.display="none"; appause.style.display="block"; } appause.onclick=function(e){ audio.pause(); appause.style.display="none"; applay.style.display="block"; } apstop.onclick=function(e){ audio.pause(); appause.style.display="none"; applay.style.display="block"; audio.currentTime=0; } rupor.onclick=function(e){ if(audio.volume>0){ vol=audio.volume; audio.volume=0; rupor.style.backgroundPosition="0 -32px"; volprocent.innerHTML="0%"; ctxvol.clearRect(0,0,apvolcanvas.clientWidth,apvol canvas.clientHeight); }else{ if(vol<0.04){vol=0.85} audio.volume=vol; rupor.style.backgroundPosition="0 0"; volprocent.innerHTML=(vol*100)+"%"; ctxvol.fillRect(0,0,vol*100,apvolcanvas.clientHeig ht); } } //кнопки управления конец ap_body.style.display="none"; apvolcanvas.addEventListener("click",function(e){ if(!e){e=window.event;} //get the latest windows event if it isn't set try{//calculate the current time based on position of mouse cursor in canvas box ctxvol.clearRect(0,0,apvolcanvas.clientWidth,apvol canvas.clientHeight); ctxvol.fillRect(0,0,e.offsetX,apvolcanvas.clientHe ight); audio.volume=e.offsetX/100; vol=audio.volume; if(vol!=0){rupor.style.backgroundPosition="0 0";}else{rupor.style.backgroundPosition="0 -32px";} volprocent.innerHTML=Math.round(vol*100)+"%"; }catch(err){} },true); audio.addEventListener("ended",fstop,false); function fstop(){ //audio.currentTime=0; appause.style.display="none"; applay.style.display="block"; loadsound=1; } audio.addEventListener("durationchange",fduration, false); var totaltime; var aduration; function fduration(){ try{ st=Math.round(audio.duration); aduration=st; m=parseInt(st/60); s=st%60; totaltime=m+":"+s;}catch(e){} } audio.addEventListener("timeupdate",ftimeupdate,fa lse); function ftimeupdate(){ fduration();//*************************************** st=Math.round(audio.currentTime); m=parseInt(st/60); s=st%60; if(s<10){s="0"+s} aptime.innerHTML=m+":"+s+"/"+totaltime; //update the progress bar if(apcanvas.getContext){ var ctx=apcanvas.getContext("2d"); //clear canvas before painting ctx.clearRect(0,0,apcanvas.clientWidth,apcanvas.cl ientHeight); ctx.fillStyle="rgb(255,0,0)"; var fWidth=(st/aduration)*(apcanvas.clientWidth); if(fWidth>0){ctx.fillRect(0,0,fWidth,apcanvas.clie ntHeight)} } } audio.addEventListener("progress",fprogress,false) ; var loadsound=0; function fprogress(){ //if(!loadsound){} try{ i=audio.buffered.length; if(i>0){ /* console.log(audio.buffered.length); console.log('Time: '+aduration); console.log('Parts: '+i+' '+audio.buffered.start(i-1)); console.log('Parts: '+i+' '+audio.buffered.end(i-1)); y=Math.round((Math.round(audio.buffered.end(i-1))*100)/aduration); console.log(y); approgress.style.width=y+"%"; if(y==100){loadsound=1}*/ }else{console.log('load:0');approgress.style.width ="100%";loadsound=1}}catch(e){console.log('err' );} } function apLoad(x){ approgress.style.width=x+3+"px"; } window.addEventListener("DOMContentLoaded",initEve nts,false); function initEvents(){ apcanvas.addEventListener("click", function(e){ if(!e){e=window.event;} //get the latest windows event if it isn't set try{//calculate the current time based on position of mouse cursor in canvas box audio.currentTime=aduration*(e.offsetX/apcanvas.clientWidth); }catch(err){} },true); } wiev_ap.onclick=function(){ h=ap_body.style;p=wiev_ap.firstChild; if(h.display!="none"){h.display="none";p.innerHTML ='►'; }else{h.display="block";p.innerHTML='◄'; if(!getSrcFlag){ ctxvol.fillStyle="#CCC"; ctxvol.clearRect(0,0,apvolcanvas.clientWidth,apvol canvas.clientHeight); ctxvol.fillRect(0,0,apvolcanvas.width,apvolcanvas. height); var grad=ctxvol.createLinearGradient(0,0,apvolcanvas.w idth,apvolcanvas.height);//(sx, sy, dx, dy); grad.addColorStop(0,"#00f");grad.addColorStop(0.5, "#ff0");grad.addColorStop(1,"#f00"); ctxvol.fillStyle=grad; ctxvol.fillRect(0,0,vol*100,apvolcanvas.clientHeig ht); } } } ap_sound.onclick=function(){wiev_ap.click();if(!ge tSrcFlag){applay.click()}} Имхо, буферизация хромает, duration при первой загрузке показывает время на несколько секунд меньше, но песня играется полностью, думаю только Гудвин сможет помочь. |
а где ещё ктонить видел плеер без флеш и библиотеки JPlayer?
|
На форуме есть люди?:help:
|
audio.src - как можно проверить, что файл полностью загружен?
Уже самому не вдомёк, вторую неделю мучаюсь |
Часовой пояс GMT +3, время: 06:52. |