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

IT技术 javascript jquery html audio
2021-02-18 18:13:14

我有一个简单的自动播放片段来播放音频文件,但是我想知道是在 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>

任何帮助都会很棒。提前致谢 :)

3个回答

有几件事情...你的脚本将首先需要的音频标签。

此外,您不需要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。根据这个提交的 W3C 错误的解决方案,当currentTime设置它,它应该触发canplaycanplaythrough事件。这意味着在我们的示例中,Firefox 将无限期地播放音轨的第一秒左右,从不继续播放。我想出了这个快速的解决方法,让我们改变一下

this.currentTime = 12;

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

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

这种对规范的解释目前仍有争议,但目前这种实现应该适用于大多数支持 HTML5 音频的现代浏览器。

更新后的 jsFiddle:http : //jsfiddle.net/mNPCP/5/

好的,所以警告!oncanplaythrough 在除 IE 之外的任何浏览器中都不起作用,也没有记录,并且只有五个月大,并且仅处于草稿状态。
2021-04-17 18:13:14
仅在 IE 中记录?真的吗?难以置信!哈哈。canplaythrough(或oncanplaythough用作属性时)在 Chrome 和 Firefox 中似乎可以正常工作,并在 MDN 上进行了记录
2021-04-24 18:13:14
我在答案的后半部分提供了一个简单的解决方法
2021-05-01 18:13:14
oncanplaythrough最近添加事件处理程序,作为2012 年 3 月 29 日工作草案的一部分
2021-05-07 18:13:14
我不认为 canplaythrough 是任何标准中的任何事件。你在哪里找到的?
2021-05-10 18:13:14

最好的方法是使用媒体片段 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 方法更好,因为您向浏览器暗示您只想从某个时间戳加载。根据文件格式和服务器对范围请求的支持,浏览器可能只下载播放所需的数据。

也可以看看:

有人可以告诉我为什么这种方法第二次不起作用吗?我正在单击播放音频,但第二次单击按钮时,音频播放但 #t=begintime,endtime 不起作用
2021-04-23 18:13:14

我有一个简单的答案,适用于所有人

1- 创建一个按钮,单击时播放音频/视频
2- 测试单击按钮时播放的音频是否可以隐藏按钮
3- 在页面加载时单击按钮

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