如何检测 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 page:

Key Point: If an AudioContext is created prior to the document receiving a user gesture, it will be created in the "suspended" state, and you will need to call resume() after a user gesture is received.

然后我意识到，"hey, can't I add my own AudioContext to WaveSurfer??"是的，我可以。 WaveSurfer options 之一是 'audioContext.'

因此，我的想法是创建我自己的 AudioContext，将其放入 WaveSurfer，并读取 AudioContext 的状态以查明它是否已挂起（auto-play 失败）。

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

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

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

How to detect when Autoplay fails in WaveSurfer.js?

javascript

wavesurfer.js