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 按钮是一个很好的 "play faster" 解决方案，是对这种方法的很好补充。

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

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

HTML Audio - negative playbackRate values not working?

html

javascript

jquery

html5-audio