制作一个游戏网站首页，要求加入背景音乐
上面一行解决了， autoplay="autoplay"表示自动播放， loop="loop"循环播放。
下面继续改造，要控制暂停和播放。加入一个按钮，点击按钮停止播放背景音乐，再次点击继续背景音乐。
要实现就要用到JS,用到播放和.play()和暂停.pause()。
function autoPlay() {
var myAuto = document.getElementById("music2");
myAuto.play();
}
function closePlay() {
var myAuto = document.getElementById("music2");
myAuto.pause();
}
按钮用图标显示2种状态,CSS如下:
body {background-color:#b0c4de;}
.music.pause {
background-position: -65px 0;
}
.music {
display: block;
width: 32px;
height: 30px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAAAgCAMAAADJyc2SAAAAe1BMVEUAAADNgkbwAAAAKHRSTlMAh/zha1rxs01ILQPRzAumlYwZ88V4H+PXMLl7QDwSDwbnrJqZXuVdVszD3QAAAZhJREFUSMe9leuOgkAMhcdBRa4iqIj3dW99/yfcAzHZHTu2Yzbh/Pwo3wSmac0/k+RFsTBjJJmTnZoxkkZEVWZGSF0QxWVg8YZ8mZuglDeivA5TVN6q3IQlWxG1yyBF7K2KTWimlmyQIvdWVS81X5ACZfbqkAOqNq80X/9Fpaa4AH256ANoJqq5As2nKFKgtYv2QCdRzRRIUcuKBdDSRTugrajmCrzTdqJiCrRyUUNkM9nNFWi+eSIpJqhyB9YZJNLkXDFMPkGxBHNncMdujcWrSFt8WPZUsQbrlFvj4Qpn8vkUEdiZ/fKJ0cMVZdw3n1+RWaLGRSt2ayxc8Tv5otSr2ALt5FvjERRD8/kUJ6A9/+WpqJYUSYPm8yhmQO8uaoEuolpUdHi/4YoN0MEhV6uuPVlR58/W3if75fLa0xTlfrg1vvaODjmqay9I0fy5I+rjTL9J6NrTFWi+xyp7ZVXq2tMVFs33UPVmWNW3UaIrDsPkc6oiVhWyX1VF33y3coSD7pNvhINMVuFJOsJB98k3xkFmURR58gOCIXCeYbAOYAAAAABJRU5ErkJggg==);
position: absolute;
top: 20px;
right: 20px;
background-position: 0 0;transition: all 2s;transform: rotate(360deg);
}
小图片转码为base64，
接着下来用JS切换按钮状态并控制播放与暂停。
function changeImage()
{
if (document.getElementById("mus").className == "music")
{
document.getElementById("mus").className = "music pause";
closePlay();
}
else
{
document.getElementById("mus").className = "music";
autoPlay();
}
}
将播放/暂停按钮位置固定在网页的右上
放入网页打开试了一下，就是感觉没有动态效果，以后加点动态效果，之前网上好像有一段代码背景音乐带一个旋转图标的，有兴趣可以找一下。
下面是完整代码：
body {background-color:#b0c4de;}
.music.pause {
background-position: -65px 0;
}
.music {
display: block;
width: 32px;
height: 30px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAAAgCAMAAADJyc2SAAAAe1BMVEUAAADNgkbwAAAAKHRSTlMAh/zha1rxs01ILQPRzAumlYwZ88V4H+PXMLl7QDwSDwbnrJqZXuVdVszD3QAAAZhJREFUSMe9leuOgkAMhcdBRa4iqIj3dW99/yfcAzHZHTu2Yzbh/Pwo3wSmac0/k+RFsTBjJJmTnZoxkkZEVWZGSF0QxWVg8YZ8mZuglDeivA5TVN6q3IQlWxG1yyBF7K2KTWimlmyQIvdWVS81X5ACZfbqkAOqNq80X/9Fpaa4AH256ANoJqq5As2nKFKgtYv2QCdRzRRIUcuKBdDSRTugrajmCrzTdqJiCrRyUUNkM9nNFWi+eSIpJqhyB9YZJNLkXDFMPkGxBHNncMdujcWrSFt8WPZUsQbrlFvj4Qpn8vkUEdiZ/fKJ0cMVZdw3n1+RWaLGRSt2ayxc8Tv5otSr2ALt5FvjERRD8/kUJ6A9/+WpqJYUSYPm8yhmQO8uaoEuolpUdHi/4YoN0MEhV6uuPVlR58/W3if75fLa0xTlfrg1vvaODjmqay9I0fy5I+rjTL9J6NrTFWi+xyp7ZVXq2tMVFs33UPVmWNW3UaIrDsPkc6oiVhWyX1VF33y3coSD7pNvhINMVuFJOsJB98k3xkFmURR58gOCIXCeYbAOYAAAAABJRU5ErkJggg==);
position: absolute;
top: 20px;
right: 20px;
background-position: 0 0;transition: all 2s;transform: rotate(360deg);
}
function autoPlay() {
var myAuto = document.getElementById("music2");
myAuto.play(); // 好文本网 www.goodtext.cn
}
function closePlay() {
var myAuto = document.getElementById("music2");
myAuto.pause();
}
//www.goodtext.org
function changeImage()
{
if (document.getElementById("mus").className == "music")
{
document.getElementById("mus").className = "music pause";
closePlay(); // 好文本网 www.goodtext.cn
}
else
{
document.getElementById("mus").className = "music";
autoPlay(); // 好文本网 www.goodtext.cn
}
}
用几款浏览器测了下，Chrome浏览器通过输入网址进入好像不能自动开始播放，不知道是防火墙的问题还是什么权限问题，从一个站的其他页点过去就能正常自动播放过。
为了Chrome浏览器能自动播放，加一段判断刷新应急，代码如下：
setTimeout(function (){
var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;
if (isChrome) {
if(location.href.indexOf("#reloaded")==-1){
location.href=location.href+"#reloaded";
location.reload();
}
//www.goodtext.org
} else {
//www.goodtext.org
}
}, 6000);
首先等待6秒判断是否为Chrome浏览器，如果是就刷新一次。不过感觉这么做有点傻，有知道原因和解决办法的高手请指教一下吧，谢谢~！
本站内容仅供参考，不保证正确性，如使用本站内容出现任何问题本网站均得免责。
本站原创，欢迎转载，转载请注明出处。
· END ·
TAG:网页加背景音乐，JS控制播放，HTML5，audio 来源:网络