Question

我有一个html音频元素播放我的音轨。这是一个非常简单的设置：

<audio controls loop="loop">
    <source type="audio/wav" src="song.wav">
</audio>

我认为制作自定义起点和终点同样简单。即如果我的曲目是10秒长，我想修剪一点，所以只播放歌曲的中间部分。

从the W3 audio tag doc来看，它似乎没有任何指定开始和结束时间的选项。

我没有要求任何人为我编写代码;我正在寻找如何解决这个问题的概念指南。我需要它来处理循环，即它应该以每个循环的指定值开始和结束。我正在寻找一种完全是客户端的方法，并且可以在Chrome中使用

Answer 1

我确实找到了有效的方法。

canplaythrough事件是不够的，因为音频将循环播放;这个事件只被解雇一次

作为替代方案，我正在使用timeupdate事件:(这在coffeescript中）

   window.playbackStart = 2
   window.playbackEnd = 4

   $("audio").off("timeupdate").on "timeupdate", (e) ->
      audio = e.currentTarget
      if audio.currentTime > playbackEnd
        audio.currentTime = playbackStart

这看起来很简单，但我不得不做一些调试，因为调用currentTime =无效（它只是将时间设置为零，无论如何）。事实证明问题实际上是服务器端（参见https://stackoverflow.com/a/32667819/2981429）。

我需要：

配置我的服务器以使用HTTP 1.1
- 使用Nginx，我添加了
```
proxy_http_version 1.1;
proxy_set_header Connection "";
```
  到我的location { }区块
在我的应用程序中，使用响应设置标题Accept-Ranges: bytes。

Answer 2

这是我在评论中链接的答案略有改动的代码...请参阅信息的提交

http://jsfiddle.net/mNPCP/313/

// set start and end times 
    var startTime = 12;
    var endTime = 15;
    myAudio=document.getElementById('audio2');
    myAudio.addEventListener('canplaythrough', function() {

      // start it at the start time
      this.currentTime = startTime;
      this.play();
      // let it play to the end time and then reset the play time
      setTimeout(function(){
        this.currentTime = startTime;
      }, (endTime-startTime)*1000)
    });

Answer 3

我会修剪.wav文件本身

html音频元素的自定义起点和终点

3 个答案: