Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.11.2015, 17:27
Кандидат Javascript-наук
Отправить личное сообщение для zhurchik Посмотреть профиль Найти все сообщения от zhurchik
 
Регистрация: 04.06.2011
Сообщений: 116

Media API (Буферизация)
С данным недугом столкнулся в хроме (версия 46).

var audio = new Audio();
audio.src = "ссылка на файл mp3";
audio.load();


audio.play();//Этот метод срабатывает по событию canplay


Так вот, запускаю я этот код и все работает правильно. После того как вся песня была загружена в буфер, что я проверил через audio.buffered... Я по событию onclick перемотал песню назад при помощи свойства audio.currentTime. Песня то перемоталась, вот только браузер отправил повторный запрос на сервер (хотя ведь данные уже в буфере) и начал по новой грузить данные начиная с определенных бит (по заголовку Range: bytes=). И при каждой перемотке браузер шлет новые запросы. Почему он это делает и как избавиться от этого?
Ответить с цитированием
  #2 (permalink)  
Старый 15.11.2015, 18:39
Аватар для Опан
Кандидат Javascript-наук
Отправить личное сообщение для Опан Посмотреть профиль Найти все сообщения от Опан
 
Регистрация: 15.03.2013
Сообщений: 100

А на чём был сделан клик с целью перемотки? (Желательно увидеть более полный код.) Может в этот момент вся страница перезагружается?
Ответить с цитированием
  #3 (permalink)  
Старый 15.11.2015, 18:49
Кандидат Javascript-наук
Отправить личное сообщение для zhurchik Посмотреть профиль Найти все сообщения от zhurchik
 
Регистрация: 04.06.2011
Сообщений: 116

Опан,
Нет, страница не перезагружается. КЛик был осуществлен просто по блоку <span> на который я повесил это событие, а в него был передан объект audio. Как я уже описывал, все работает, вот только браузер нагло шлет запрос за запросом при перемотки (страница точно не перезагружается)
Ответить с цитированием
  #4 (permalink)  
Старый 15.11.2015, 20:40
Аватар для Опан
Кандидат Javascript-наук
Отправить личное сообщение для Опан Посмотреть профиль Найти все сообщения от Опан
 
Регистрация: 15.03.2013
Сообщений: 100

У меня этого не происходит. Такой же хром, будем думать ещё.
Ответить с цитированием
  #5 (permalink)  
Старый 26.11.2015, 02:01
Новичок на форуме
Отправить личное сообщение для Puaris83 Посмотреть профиль Найти все сообщения от Puaris83
 
Регистрация: 24.02.2010
Сообщений: 9

Сообщение от Опан Посмотреть сообщение
У меня этого не происходит. Такой же хром, будем думать ещё.
Такая же и в опере беда. Просто если файл на локальном, то хром и опера работает, если на сервере , то с первой попытки будет видна описанная проблема, но стоит перезагрузить F5 страницу и тогда браузер будет работать с кешем и такой беды не будет.

Здесь беда в неправильной загрузке файла, а как правильно кто знает, читал у микрософта - есть всё, можно библиотеку не скачивать, а этот нюанс не описан.

Может у кого есть кусок кода правильной буферизации?
Ответить с цитированием
  #6 (permalink)  
Старый 26.11.2015, 02:19
Новичок на форуме
Отправить личное сообщение для Puaris83 Посмотреть профиль Найти все сообщения от Puaris83
 
Регистрация: 24.02.2010
Сообщений: 9

я пытался по аналогии с микрософтовской инструкцией сделать собственную библиотеку.

Всё хорошо, но вышеописанная беда - без перезагрузки перемотка не работает


приведу код - он простой

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 при первой загрузке показывает время на несколько секунд меньше, но песня играется полностью, думаю только Гудвин сможет помочь.
Ответить с цитированием
  #7 (permalink)  
Старый 26.11.2015, 17:53
Новичок на форуме
Отправить личное сообщение для Puaris83 Посмотреть профиль Найти все сообщения от Puaris83
 
Регистрация: 24.02.2010
Сообщений: 9

а где ещё ктонить видел плеер без флеш и библиотеки JPlayer?
Ответить с цитированием
  #8 (permalink)  
Старый 26.11.2015, 22:34
Новичок на форуме
Отправить личное сообщение для Puaris83 Посмотреть профиль Найти все сообщения от Puaris83
 
Регистрация: 24.02.2010
Сообщений: 9

На форуме есть люди?
Ответить с цитированием
  #9 (permalink)  
Старый 26.11.2015, 23:54
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Puaris83, а нафиг так делать:
audio.src = "ссылка на файл mp3"; // загрузка
audio.load(); // перезагрузка
Потом удивляются откуда у них повторный запрос вы в своем уме господа?
Ответить с цитированием
  #10 (permalink)  
Старый 29.11.2015, 23:30
Новичок на форуме
Отправить личное сообщение для Puaris83 Посмотреть профиль Найти все сообщения от Puaris83
 
Регистрация: 24.02.2010
Сообщений: 9

audio.src - как можно проверить, что файл полностью загружен?

Уже самому не вдомёк, вторую неделю мучаюсь
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не получается вывод данных из RESTful api Wahtel Общие вопросы Javascript 1 16.08.2015 10:30
Проверка статуса авторизации через open api на сайте (vk.com api) mecer Общие вопросы Javascript 4 06.05.2014 08:31
Посоветуйте как улучшить код для работы с history api [ jquery + js + history api ] Geo Ваши сайты и скрипты 0 12.01.2014 00:41
HTML5 Geolocation API, вопрос о снятии данных User-Agent (X)HTML/CSS 2 22.02.2013 20:09
MVC vs API. Ваше мнение. B~Vladi Общие вопросы Javascript 58 19.10.2010 16:29