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＆lt; 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，也可以尝试将音频元素附加到现有元素。查看更多详情here。

不幸的是，考虑到跨浏览器的使用，html5音频还存在许多其他问题。编解码器只是一件事;使用ogg + mp3可能是必要的。 Flash回退不是由SoundManager和Howler.js等库/ API使用的非常简洁的解决方案。还有soundJS，这可能是最好的尝试。另见我的SO question。

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

1 个答案: