HTML音频元素的自定义开始和结束点

Question

我有一个HTML音频元素播放我的音轨。它是一个相当简单的设置：

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

我认为制作自定义的开始和结束点应该很简单。例如，如果我的音轨长达10秒，我想剪辑一点，只播放歌曲的中间部分。

从 W3音频标签文档中看来，似乎没有任何选项可以指定开始和结束时间。

我不是要求任何人为我编写代码；我正在寻找一个概念性指南，告诉我如何解决这个问题。我需要它与循环一起工作，也就是说，每次循环都应该在我的指定值处开始和结束。我正在寻找一种完全客户端的方法，并且可以在Chrome中工作。

- max pleaner

---

你最好参考MDN。W3Schools不完整且经常错误。请查看：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio - Robert Parham

@RobertParham 已经注意到了，但我仍然没有看到任何列出的“开始”或“结束”指令。 - max pleaner

也许这会有所帮助.. https://dev59.com/I2ct5IYBdhLWcg3whtyh - Robert Parham

@RobertParham 这个答案覆盖了从特定时间开始，而不是结束。 - max pleaner

好的，你说你不是在找人为你编写代码，所以我想你可以从那里推断出来...... - Robert Parham

@RobertParham 如果你感兴趣的话，可以看一下我发布的答案。 - max pleaner

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://dev59.com/S2kw5IYBdhLWcg3w6ewb#32667819）。

我需要：

1. Configure my server to use HTTP 1.1

   • with Nginx, I added

     proxy_http_version 1.1;
     proxy_set_header Connection "";
     

     to my location { } block

2. In my application, set the header Accept-Ranges: bytes with the response.

- max pleaner

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)
    });

- Robert Parham

---

不幸的是，我认为这并不简单。Chrome在设置currentTime方面存在问题，而当音频循环时，“canplaythough”是不够的。虽然我感谢你的尝试。我会告诉你我想出了什么。 - max pleaner

经过更深入的研究，似乎我的问题实际上可能是服务器端的（请参见https://dev59.com/S2kw5IYBdhLWcg3w6ewb#32667819）。 - max pleaner

Answer 3

我会修剪 .wav 文件本身

- becker33

---

我真的在寻找一个仅限客户端的解决方案。 - max pleaner