Прикрутить собственный плеер к audiorecorder?

346
14 июля 2017, 06:35

Делаю рекордер использую recorderworker и mp3worker

Стандартно после остановки записи , файл передается в recordingslist.appendChild(li); я хочу вставить свой плеер чтобы после записи плеер не создавался отдельно а оставался на месте и его можно было прослушать пробую так консоль выдает ошибку Uncaught TypeError: Cannot set property 'src' of undefined прошу помочь Recorder js

function endFile(blob, extension) { 
 
      console.log("Done converting to " + extension); 
 
      console.log("the blob " + blob + " " + blob.size + " " + blob.type); 
 
      var url = URL.createObjectURL(blob); 
      var li = document.createElement('li'); 
      var hf = document.createElement('a'); 
      hf.href = url;  
      hf.download = new Date().toISOString() + '.' + extension; 
 
      var au = document.createElement('audio'); 
      au.controls = true; 
      au.src = url; 
   audioRecorder.player=audioRecorderElem.find('audio')[0]; 
      audioRecorder.player.addEventListener('timeupdate',function(){ 
      var duration=audioRecorder.player.duration; 
      var current=audioRecorder.player.currentTime; 
      var r=(current*100)/duration; 
      $('.audioRecorder .progressBar').css({'width':r+'%'}); 
      time=audioRecorder.secondsToTime(current); 
      $('.audioRecorder .duration').text(time); 
      if(duration==current){ 
        $('.audioRecorder').attr({'status':'stop'}); 
      } 
    });				 
    audioRecorder.player.src=url; 
    audioRecorder.recorder.clear(); 
    audioRecorder.removeMicrophone(); 
  });	 
};

JS PLAYER

var audioPlayer={}; 
audioPlayer.play=function(el){ 
  var playerParent=$(el).parents('.audioPlayer'); 
  var player=playerParent.find('audio'); 
  var progressWrapper=playerParent.find('.progressWrapper'); 
  var seekBar=playerParent.find('.seekBar'); 
  var progressBar=playerParent.find('.progressBar'); 
  var currentElem=playerParent.find('.current'); 
  var durationElem=playerParent.find('.duration'); 
  if(!el.h1){ 
    player[0].addEventListener('timeupdate',function(){ 
      var duration=player[0].duration; 
      var w=progressWrapper.css('width'); 
      var current=player[0].currentTime; 
      var r=(current*100)/duration; 
      progressBar.css({'width':r+'%'}); 
      if(duration){ 
        var b=false; 
        if((duration/3600)>=1){b=true;} 
        var time=audioPlayer.secondsToTime(current,b); 
        currentElem.html(time); 
        durationElem.html(audioPlayer.secondsToTime(duration,b)); 
      } 
      if(duration==current){playerParent.attr({'status':'pause'});} 
    });		 
    el.h1=1; 
    player[0].src=playerParent.attr('src'); 
    player[0].volume=0.7; 
  } 
  if(player[0].paused){ 
    player[0].play(); 
    playerParent.attr({'status':'play'}); 
  }else{ 
    player[0].pause(); 
    playerParent.attr({'status':'pause'}); 
  } 
}; 
audioPlayer.stop=function(el){ 
  var playerParent=$(el).parents('.audioPlayer'); 
  var player=playerParent.find('audio'); 
  player[0].pause(); 
  player[0].currentTime=0; 
  playerParent.attr({'status':'stop'}); 
}; 
audioPlayer.time=function(el,e){ 
  var playerParent=$(el).parents('.audioPlayer'); 
  var player=playerParent.find('audio');	 
  var slider=playerParent.find('.progressWrapper'); 
  var sliderW=slider.width(); 
  var duration=player[0].duration; 
  var x=e.clientX-slider[0].getBoundingClientRect().left; 
  var ct=(x*duration)/sliderW; 
  player[0].currentTime=ct; 
}; 
audioPlayer.volume=function(el,e){ 
  var playerParent=$(el).parents('.audioPlayer'); 
  var player=playerParent.find('audio');	 
  var slider=playerParent.find('.volumeWrapper'); 
  var volumeBar=playerParent.find('.volumeBar'); 
  var sliderW=slider.width(); 
  var x=e.clientX-slider[0].getBoundingClientRect().left; 
  var r=(x*100)/sliderW; 
  var v=Math.floor(r); 
  player[0].volume=(v/100); 
  volumeBar.css({'width':r+'%'});		 
}; 
audioPlayer.secondsToTime=function(v,b){ 
  var r,h=0,m=0,s=0; 
  if(v>=3600){h=Math.floor(v/3600%24);} 
  if(v>=60){m=Math.floor(v/60%60);} 
  s=Math.floor(v%60); 
  if(s<10){s='0'+s;} 
  if(h>0&&m<10){m='0'+m;} 
  r=m+':'+s; 
  if(b||h>0){r=h+':'+r;} 
  return r;	 
};

READ ALSO
Создать кнопку с атрибутом onclick

Создать кнопку с атрибутом onclick

Подскажите, как через JS DOM создать подобный input:

337
Выборка тегов по содержимому

Выборка тегов по содержимому

Есть 3 тега с классом time с текстом, к примеру:

251
Компиляция sass через плагин gulp-sass. Ошибка browser-sync

Компиляция sass через плагин gulp-sass. Ошибка browser-sync

Вопрос: Запустив gulp watch, когда делаю изменения в файле sass и его сохранении (ctrl + S) на странице автоматически, я думаю что из-за browser-synс, появляется...

254