您的位置:首页 > Web前端 > HTML5

html5 -----audio标签

2015-07-13 17:57 309 查看
在现在的公司上班需要做一个html5页面,上下可以滑动的,在页面上需要音乐,默认开始音乐播放,点击音乐标签后音乐停止。后来在项目开发中,遇到性能优化的问题,所以我建议大家以后在使用时不要直接在页面中使用audio标签

例如:<audio src="/h5/a/bg.mp3" autoplay loop data-src="/h5/a/bg.mp3" id="musicall"></audio>

这样不太好,页面预解析的时候就可以播放了,最后用JS在页面加载完成后添加

window.onload = function(){
var music = document.getElementById('u-globalAudio');
var audio = document.createElement("audio");
var music_img = document.getElementsByTagName('img')[0];
audio.setAttribute('src', '/h5/a/bg.mp3');
audio.setAttribute('data-src', '/h5/a/bg.mp3');
audio.setAttribute('loop','');
audio.setAttribute('autoplay','');
audio.setAttribute('id','music1');
music.appendChild(audio);
var onOFF = true;
//var audio = document.getElementById('music1');
music_img.onclick = function(){
if(audio!==null){
//检测播放是否已暂停.audio.paused 在播放器播放时返回false.<span style="font-family: Arial, Helvetica, sans-serif;">在播放器暂停时返回true</span>

if(!audio.paused)
{
audio.pause();// 这个就是暂停//audio.play();// 这个就是播放
onOFF = false;
}else{
audio.play();
onOFF = true;
}
}
}
//setTimeout("document.getElementById('musicall').src='/h5/a/bg.mp3'; ",3000);

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: