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

Question

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

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

我认为制作自定义起点和终点也同样简单。 IE。如果我的轨道长 10 秒，我想稍微 trim 一下，以便只播放歌曲的中间部分。

来自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 )。

我需要:

1. 将我的服务器配置为使用 HTTP 1.1

   • 对于 Nginx，我添加了

     proxy_http_version 1.1;
     proxy_set_header Connection "";
     

     到我的位置 { } block

2. 在我的应用程序中，使用响应设置 header Accept-Ranges: bytes。