2

I am creating an audio element in JavaScript and then appending it to my document. I am controlling it through JavaScript as well. It works fine in Firefox, Chrome, and Opera but not on IE and Safari. In those two browsers, the readyState of the audio element never changes from 0 nor do any associated events fire. Here is my basic program:

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;
}
4

1 回答 1

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问题。

于 2014-05-07T07:26:09.990 回答