2

我习惯于使用 javascript 媒体承诺来检测自动播放何时失败，如下所述：https ://developers.google.com/web/updates/2017/09/autoplay-policy-changes 。但是如何检测 WaveSurfer.js 中的自动播放失败？

我已经尝试了错误事件，但在这种情况下它似乎没有做任何事情。更奇怪的是，不管它是否真的在播放，play 事件都会触发。

https://jsfiddle.net/mcrockett/k985zjh2/18/

    var wavesurfer = WaveSurfer.create({
        container: '#waveform',
        waveColor: 'red',
        progressColor: 'purple'
    });

    function play() {
        wavesurfer.playPause();
    }

    wavesurfer.on('ready', play);

    wavesurfer.on('error', function(){
        console.log("does not get called when autoplay fails :(");
    });

    wavesurfer.on('play', function(){
        console.log("called even when autoplay fails");
    });




 wavesurfer.load('https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');

有关示例，请参见我的 jsfiddle。如果通过 Chrome 查看，自动播放通常会失败。

4

1 回答 1

1

搜索了一下，发现 WaveSurfer JS 使用的是 WebAudio（创建了一个名为 AudioContext 的对象）。根据谷歌页面：

关键点：如果AudioContext是在文档接收到用户手势之前创建的，它会在“suspended”状态下创建，需要在接收到用户手势后调用resume()。

然后我意识到，“嘿，我不能将自己的 AudioContext 添加到 WaveSurfer 吗？？” 我可以。WaveSurfer选项之一是“audioContext”。

因此，我的想法是创建自己的 AudioContext，将其放入 WaveSurfer 中，并读取 AudioContext 的状态以了解它是否已暂停（自动播放失败）。

我从来没有对网络音频做过任何事情。但是在四处挖掘之后，我想出了这个：

// Fix up for prefixing
window.AudioContext = window.AudioContext||window.webkitAudioContext;
var context = new AudioContext();

if(context.state === 'suspended')
  alert("auto-play failed!!");

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'red',
  progressColor: 'purple',
  audioContext: context
});

https://jsfiddle.net/mcrockett/02azn6Lb/6/

于 2019-07-12T19:11:39.863 回答