动态创建的HTML5音频在某些浏览器中无法播放？

Question

我正在用JavaScript创建音频元素，然后将其附加到我的文档中。 我也通过JavaScript控制它。 它在Firefox，Chrome和Opera中运行良好，但在IE和Safari上却无法运行。 在这两个浏览器中，音频元素的readyState永远不会从0更改，也不会触发任何关联的事件。 这是我的基本程序：

var init = function() {
    var audioElement = createAudioElement();        
    audioElement.addEventListener('canplay', function() {
        audioElement.play();
        trace(audioElement.readyState);
    }, false);
    document.body.appendChild(audioElement);
    //audioElement.play();  
}

var createAudioElement = function() {
    var m4a = 'song.m4a';
    var ogg = 'song.ogg';

    var m4aSrc = document.createElement('source');
        m4aSrc.setAttribute('src', m4a);
        m4aSrc.setAttribute('type', 'audio/mp4');
    var oggSrc = document.createElement('source');
        oggSrc.setAttribute('src', ogg);
        oggSrc.setAttribute('type', 'audio/ogg');
    var audioEle = document.createElement('audio');
        audioEle.setAttribute('preload', 'preload');
        audioEle.appendChild(m4aSrc);
        audioEle.appendChild(oggSrc);

    return audioEle;
}

Answer 1

我知道这有点晚了，但是仍然； 我设法在所有这些浏览器（IE <9除外）上播放音频，而没有附加到DOM。 您可以使用以下方式创建音频：

var audios = {};
audios['audioIDorName'] = new Audio('pathToYourAudio');   // create audio element
audios['audioIDorName'].load();                           // force load it
audios['audioIDorName'].addEventListener('canplaythrough', audioLoaded, false); // add event for when audio is fully loaded

然后，创建audioLoaded（）函数，该函数检查何时加载所有音频（例如，如果您在一个循环中添加了一个以上或一个又一个添加了一个。

var audiosLoaded = 0
function audioLoaded(){ 
    audiosLoaded++;
    console.log("Loaded "+this.src);
    // here you can check if certain number of audios loaded and/or remove eventListener for canplaythrough
    audios['audioIDorName'].removeEventListener('canplaythrough', audioLoaded, false);       
}

然后，您可以使用以下功能操作音频：

audios['yourAudioIDorName'].pause();
audios['yourAudioIDorName'].currentTime = 0; // pause() and currentTime = 0 imitate stop() behaviour which doesn't exist ...
audios['yourAudioIDorName'].play();

这对我有用。

如果您坚持要附加到DOM，也可以尝试将音频元素附加到现有元素。 在这里查看更多详细信息。

不幸的是，考虑到跨浏览器的使用，html5音频还有许多其他问题。 编解码器只是一回事。 使用ogg + mp3可能是必要的。 Flash回退并不是那么整洁的解决方案，它被诸如SoundManager和Howler.js之类的库/ API使用。 也有soundJS ，这也许是最好的尝试。 也请参阅我的SO 问题 。