html5 -----audio标签

标签：

在现在的公司上班需要做一个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); 



}

html5 -----audio标签

标签：

原文地址：http://www.cnblogs.com/jquery37/p/4643537.html