如何在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/