[英]What is wrong with this audio in HTML5?
我对 HTML5 和 JavaScript 的音频内容非常生气。 当它已经在 HTML 中时它运行良好,但由于我将它移到 JavaScript,它就无法正常工作。 我不想使用 jQuery,因为我想保持尽可能低的大小。 所有函数都存在,变量也是如此。 Chrome 没有给我任何错误,但网络下的 Chrome 开发者工具说; 待定。 所以我知道它获取了所有数据,但它只是不返回任何内容。 它不返回负载和/或oncanplay 。
请有人就我可能做错的事情或 Chrome 中可能的错误向我提出建议。
function loadAudio(loc,after){
window.itemsToLoad++;
var aud = new Audio(loc);
if(typeof(after)=="function"){
aud.addEventListener('load', function () {updateLoaders();alert('Yes');after(aud);}, false);
}else{
aud.addEventListener('load', function () {alert('Yes');updateLoaders();},false);
}
aud.preload="none";
aud.addEventListener('onerror', function () {alert('Error');updateErrorLoaders();},false);
aud.addEventListener('onabort', function () {alert('abort');updateErrorLoaders();},false);
aud.addEventListener('onemptied', function () {alert('empty');updateErrorLoaders();},false);
aud.type="type=\"audio/ogg\"";
aud.controls="controls";
aud.load();
return aud;
}
window.imageBackground = loadImage('images/background2.png',function (img) { alert("Yes it bloody works ;)");});
我注意到您的代码存在一些问题。 首先,您定义了一个loadAudio
函数,但实际上您正在调用loadImage('images/background2.png', fn)
。 我认为这只是您复制和粘贴代码时的失误。 其次, <audio>
元素不支持type
属性。 如果要指定媒体类型,请使用子<source>
元素。 最后,您正在收听错误的事件。 音频元素不响应onload
事件,而是使用onloadeddata
事件。 这是带有更新和一些扩展的代码,以支持在音频播放完毕后将调用的回调:
function updateLoaders() {
// do stuff
}
function updateErrorLoaders() {
// do stuff
}
function loadAudio(src, loadComplete, playComplete) {
window.itemsToLoad++;
var audio = new Audio();
// Playback has completed.
audio.addEventListener('ended', function () {
if (typeof playComplete === 'function') {
playComplete(audio);
}
}, false);
// The entire song has loaded (not necessarily done playing).
audio.addEventListener('loadeddata', function () {
updateLoaders();
if (typeof loadComplete === 'function') {
loadComplete(audio);
}
}, false);
// Handle errors.
audio.addEventListener('error', function () {
console.log('error');
updateErrorLoaders();
}, false);
audio.addEventListener('abort', function () {
console.log('abort');
updateErrorLoaders();
}, false);
audio.addEventListener('emptied', function () {
console.log('empty');
updateErrorLoaders();
}, false);
audio.preload = 'none';
audio.src = src;
audio.controls = 'controls';
audio.load();
return audio;
}
var audio = loadAudio('Example.ogg', function (audio) {
console.log('audio completely loaded');
audio.play();
});
有关<audio>
元素支持的事件的更多详细信息,请参阅W3Schools 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.