如何在WaveSurfer.js中检测自动播放何时失败？

Question

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

我尝试了错误事件，但在这种情况下似乎没有任何作用。 甚至更奇怪的是，无论是否实际在播放，播放事件都会触发。

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浏览器查看，自动播放通常会失败。

Answer 1

在四处搜寻之后，我发现WaveSurfer JS使用WebAudio（创建了一个名为AudioContext的对象）。 根据Google页面 ：

关键点：如果在文档接收用户手势之前创建了AudioContext，它将以“已暂停”状态创建，并且在收到用户手势之后您需要调用resume（）。

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

因此，这个想法是创建我自己的AudioContext，将其放入WaveSurfer中，并读取AudioContext的状态，以查明它是否被挂起（自动播放失败）。

我从未对Web Audio做任何事情。 但是在深入研究之后，我想到了：

// 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/