给自己的html5加上背景音乐 网页加背景音乐用JS控制播放 HTML5 - audio

制作一个游戏网站首页，要求加入背景音乐

上面一行解决了， 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(); // 好文本网

}

function closePlay() {

var myAuto = document.getElementById("music2");

myAuto.pause();

}

//

function changeImage()

{

if (document.getElementById("mus").className == "music")

{

document.getElementById("mus").className = "music pause";

closePlay(); // 好文本网

}

else

{

document.getElementById("mus").className = "music";

autoPlay(); // 好文本网

}

}

用几款浏览器测了下，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();

}

//

} else {

//

}

}, 6000);

首先等待6秒判断是否为Chrome浏览器，如果是就刷新一次。不过感觉这么做有点傻，有知道原因和解决办法的高手请指教一下吧，谢谢~！

本站内容仅供参考，不保证正确性，如使用本站内容出现任何问题本网站均得免责。

本站原创，欢迎转载，转载请注明出处。

· END ·

TAG:网页加背景音乐，JS控制播放，HTML5，audio 来源:网络