给自己的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(); // 好文本网 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 来源:网络

  • 1
    点赞
  • 1
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值