可以将html5音频流与当前设备时间100%同步

时间:2018-03-03 07:21:38

标签: javascript html html5 html5-audio

我想知道是否可能HTML5音频流超级精确地与设备当前时间同步。 就像我在设备时间有一个10分钟的音频文件01:00音频从00:00开始,在01:05音频在05:00播放并在01:10结束。我的意思是,当我点击播放HTML5音频播放器时,它会根据当前设备时间播放音频。

这是我尝试过的,但音频总是落后于时间(以毫秒为单位)。



 var player = document.getElementById('music'); 
player.addEventListener('play', function() { 
            var main_date = new Date();
            var hour = main_date.getUTCHours();
            var minutes = main_date.getUTCMinutes();
            var seconds = main_date.getUTCSeconds();

            var current_second = ( hour * 60 * 60 ) + ( minutes * 60 ) + seconds;
            var audio_start =  current_second%player.duration ;
            player.currentTime = parseInt(audio_start);
        }, false);
        
        player.addEventListener('timeupdate', updateProgressBar, false);
         
        function updateProgressBar() {
            var percentage = Math.floor((100 / player.duration) * player.currentTime);
 
            var di = document.getElementById('datetime');
            di.innerHTML = new Date() ;
        }
        

<div id="datetime"></div>
<audio controls id="music">
<source src="http://www.easel.ca/wp-content/uploads/2018/03/ClAudioSync-599_99seconds_128kbps.mp3">
<audio>
   
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

您最好的选择是使用Web Audio API。

通过使用WAA,您通常会先将整个样本加载到内存中,然后使用AudioContext上的currentTime schedule样本。使用offset参数确定样本中的起始点。