javascript - HTML 音频 - 负 playbackRate 值不起作用？

Question

我正在播放 HTML 和 JS/JQuery 中的音频以构建音频播放器。我有播放、暂停和快进功能，但没有倒带或后退功能。在W3Schools Documentation它说:

playbackspeed Indicates the current playback speed of the audio/video. Example values:

-1.0 is backwards

所以我写的代码如下:

<audio id="player">
    <source src="http://www.dkedomain.com/public/podcast/shows/the-domain-episode-09.mp3" type="audio/mpeg" />
</audio>

<button class="rewind">Rewind</button>
<button class="play">Play</button>
<button class="pause">Pause</button>
<button class="twotimes">2x</button>
<button class="forward">Fast Forward</button>

<script>

    var player = document.getElementById('player');;
    player.load();

    $('button.rewind').click(function(){
        player.playbackRate = -1.0;
    });

    $('button.play').click(function(){
        player.play();
        console.log(player.currentTime);
    });

    $('button.pause').click(function(){
        player.pause();
        console.log(player.currentTime);
    });

    $('button.twotimes').click(function(){
        player.playbackRate = 2.0;
    });

    $('button.forward').click(function(){
        player.playbackRate = 3.0;
    });

</script>

如何使它按照记录的那样工作？

Answer 1

How can I play audio in reverse with web audio API? 的 Stack Overflow 答案显示设置 audio.playbackrate = -1 将起作用，但基于 WebKit 的浏览器除外。 Chrome 和 Safari 将忽略此设置，尽管其他浏览器可能支持它。

一件有趣的事情可能是实现 Rewind 以返回几秒钟，有点像一些 DVR 播放器。这样的事情可能会起作用:

$('button.rewind').click(function() {
    var currentTime = player.currentTime;
    player.currentTime = (currentTime >= 3.0) ? currentTime - 3.0 : 0;
});

您也可以对 Fast Forward 执行相同的操作，以获得特征的对称性。您的 2x 按钮是一个很好的“玩得更快”的解决方案，这是对这种方法的很好的补充。

我为此创建了一个 jsFiddle，其中包含您可能喜欢的各种其他更改:https://jsfiddle.net/mgaskill/11n63g3w/