动态创建的HTML5音频在某些浏览器中无法播放? [英] Dynamically created HTML5 audio is not playable in some browsers?

问题描述

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

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

推荐答案

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

I know this is a bit late, but still; I managed to play audio on all those browsers (except IE < 9) without appending to DOM. You can create audios with something like this:

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()函数，该函数检查何时加载所有音频(例如，如果您在一个循环中添加了多个音频，或者一个又一个添加了另一个音频.

Then you create audioLoaded() function which checks when all your audios are loaded (if you for instance added more than one in a loop or one after another.

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

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

Then you manipulate audios with these functions:

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

这对我有用.

如果您坚持要附加到DOM，也可以尝试将音频元素附加到现有元素.在此处.

You can also try appending your audio element to an existing element if you insist on appending to DOM. See more details here.

不幸的是，考虑到跨浏览器的使用，html5音频还有很多其他问题.编解码器只是一回事.使用ogg + mp3可能是必要的. Flash回退是一种不太整洁的解决方案，库/API(例如 SoundManager )使用了这种解决方案.和 Howler.js .还有 soundJS 也是最好的尝试.参见我的SO 问题.

Unfortunately there are still many other issues with html5 audio considering cross-browser usage. Codecs are just one thing; using ogg+mp3 is probably necessary. Flash fallback is not-so-neat solution that is used by libraries/APIs such as SoundManager and Howler.js. There is soundJS as well which may be the best thing to try. See my SO question as well.

这篇关于动态创建的HTML5音频在某些浏览器中无法播放?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！