36

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

任何帮助都会很棒。提前致谢 ：）

4

3 回答 3

26

一些事情......你的脚本首先需要在音频标签之后。

此外，您不需要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/

编辑：似乎在Firefox 以外的currentTime浏览器中实施不当。根据这个提交的 W3C 错误的解决方案，当设置它应该触发和事件。这意味着在我们的示例中，Firefox 将无限期地播放音轨的第一秒左右，从不继续播放。我想出了这个快速的解决方法，让我们改变currentTimecanplaycanplaythrough

this.currentTime = 12;

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

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

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

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

于 2012-08-19T22:19:13.163 回答
22

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

也可以看看：

于 2019-04-09T01:38:37.613 回答
-1

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

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

    window.onload =function(){
        document.getElementById("btn").click();
    }
于 2021-09-11T14:29:53.310 回答