jquery HTML 5< audio>-在特定时间点播放文件

7cjasjjr  于 2023-11-17  发布在  jQuery
关注(0)|答案(3)|浏览(154)

我有一个简单的自动播放片段,播放音频文件,但我想知道无论是在JavaScript或作为一个属性播放该文件在某个时间(例如3:26)。

<script type="text/javascript">
    var myAudio=document.getElementById('audio2')
    myAudio.oncanplaythrough=function(){this.play();}
</script>

<audio id="audio2" 
       preload="auto" 
       src="file.mp3" 
       oncanplaythrough="this.play();">
</audio>

字符串
任何帮助都将是伟大的。提前感谢:)

m1m5dgzv

m1m5dgzv1#

最好的方法是使用Media Fragment URI规范。以你的例子为例,假设你想从3:26开始加载音频。

<audio id="audio2" 
       preload="auto" 
       src="file.mp3#t=00:03:26" 
       oncanplaythrough="this.play();">
</audio>

字符串
或者,我们可以只使用秒数,如file.mp3#t=206
您还可以通过用逗号分隔开始时间和结束时间来设置结束时间。file.mp3#t=206,300.5
此方法比JavaScript方法更好,因为您向浏览器暗示您只想从某个时间戳加载。根据文件格式和服务器对范围请求的支持,浏览器可能只下载播放所需的数据。
另请参阅:

7ajki6be

7ajki6be2#

有几件事.你的脚本首先需要在音频标签之后。
此外,您不需要audio标记上的oncanplaythough属性,因为您使用JavaScript来处理此问题。
此外,oncanplaythrough是一个事件,而不是一个方法。让我们为它添加一个侦听器,它将使用canplaythough。看看这个:

<audio id="audio2" 
   preload="auto" 
   src="http://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg" >

   <p>Your browser does not support the audio element</p>
</audio>

<script>
  myAudio=document.getElementById('audio2');
  myAudio.addEventListener('canplaythrough', function() {
    this.currentTime = 12;
    this.play();
  });
</script>

字符串
最后,要在特定的时间点开始播放歌曲,只需在实际播放文件之前设置currentTime。这里我将其设置为12秒,因此在本例中可以听到,对于3:26,您将使用206(秒)。
查看现场演示:http://jsfiddle.net/mNPCP/4/

编辑:看起来currentTime可能在Firefox以外的浏览器 * 中不正确地实现。根据filed W3C bug的分辨率,当currentTime被设置时,它应该触发canplaycanplaythrough事件。这意味着在我们的例子中,Firefox将无限期地播放音轨的第一秒左右,永远不会继续播放。我想出了这个快速的解决方法,我们换

this.currentTime = 12;


测试它是否已经被设置,从而防止canplaythrough被重复调用:

if(this.currentTime < 12){this.currentTime = 12;}


对规范的这种解释目前仍有争议,但就目前而言,这种实现应该可以在大多数支持HTML5音频的现代浏览器上工作。
更新后的jsFiddle:http://jsfiddle.net/mNPCP/5/

33qvvth1

33qvvth13#

1.创建一个按钮,当点击它播放音频/视频
1.测试当您单击按钮时播放的音频是否可以隐藏按钮,
1.页面加载时单击按钮

window.onload =function(){
    document.getElementById("btn").click();
}

字符串

相关问题