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

js播放背景音乐

2015-09-08 11:29 537 查看
这里有两种实现方式,基本上原理差不多:

<script>
var isplay = false;
function playmp3() {
if (isplay == false) {
var player = "<embed src=\"/我们说好的.mp3\" hidden=\"true\" autostart=\"true\" loop=\"true\">";
//“1.mp3”路径,自己改。loop=-1 循环播放。
document.getElementById("play").innerHTML += player;
isplay = true;
} else {
document.getElementById("play").innerHTML = "点击播放";
isplay = false;
}
}
</script>
<div id="play" onmouseover="this.style.cursor='pointer';" onclick="playmp3();">点击播放</div>


另一种实现方式:

<input type="button" value="立即播放" onclick="play_click(this, '我们说好的.mp3');">
<div id="div2"></div>
<script language="javascript">
function play_click(sef, url) {
var div = document.getElementById('div1');
div.innerHTML = '<embed src="' + url + '" loop="0" autostart="true" hidden="true"></embed>';
var emb = document.getElementsByTagName('EMBED')[0];
if (emb) {
/* 这里可以写成一个判断 wav 文件是否已加载完毕,以下采用setTimeout模拟一下 */
div = document.getElementById('div2');
div.innerHTML = 'loading: ' + emb.src;
sef.disabled = true;
setTimeout(function () { div.innerHTML = ''; }, 1000);
}
}
</script>
<div id="div1"></div>

近期又发现了一个,试了试也不错:

<script>
var mp3snd = "我们说好的.mp3";
var bkcolor = "000000";

if (navigator.userAgent.toLowerCase().indexOf("msie") != -1) {
document.write('<bgsound src="' + mp3snd + '" loop="-1">');
}
else if (navigator.userAgent.toLowerCase().indexOf("firefox") != -1) {
document.write('<object data="' + mp3snd + '" type="application/x-mplayer2" width="0" height="0">');
document.write('<param name="filename" value="' + mp3snd + '">');
document.write('<param name="autostart" value="1">');
document.write('<param name="playcount" value="infinite">');
document.write('</object>');
}
else {
document.write('<audio src="' + mp3snd + '" autoplay="autoplay" loop="loop">');
document.write('<object data="' + mp3snd + '" type="application/x-mplayer2" width="0" height="0">');
document.write('<param name="filename" value="' + mp3snd + '">');
document.write('<param name="autostart" value="1">');
document.write('<embed height="2" width="2" src="' + mp3snd + '" pluginspage="http://www.apple.com/quicktime/download/" type="video/quicktime" controller="false" controls="false" autoplay="true" autostart="true" loop="true" bgcolor="#' + bkcolor + '"><br>');
document.write('</embed></object>');
document.write('</audio>');
}

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