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>
相关文章推荐
- JavaScript获取页面大小,滚动条位置,元素位置
- eclipse安装Aptana 插件,并设置使之能提示css,js,html,帮助编写代码
- js弹出框、对话框、提示框、弹窗汇总
- 了解 JavaScript (6)– 广告条(Banner)
- js图片放大
- js,在循环中添加事件,输出循环数 i 的值,i++与++i的问题
- Json解析
- JavaScript实现的经典文件树菜单效果
- Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置
- JavaScript高级程序设计笔记 事件冒泡和事件捕获
- js校验输入字符串的字节长度
- 【JS】通过JS实现超市小票打印功能——ActiveX控件
- Hibernate存取JSON数据
- grunt学习(三)——实现JavaScript资源的合并
- JS设计模式——中介者模式
- JS设计模式——策略模式
- maven 库中添加 net.sf.json JSONArray 引用的jar包 net.sf.json-lib问题
- JS设计模式——迭代器模式
- JS设计模式——外观模式
- JS设计模式——责任链模式