登录

网页加背景音乐用JS控制播放 HTML5 - audio

1970-01-01 ·本站原创

网页加背景音乐,JS控制播放,HTML5,audio

制作一个游戏网站首页,要求加入背景音乐
<audio src="web201907/www.goodtext.cn/music.mp3" loop="loop" autoplay="autoplay"  id="music2"></audio>
上面一行解决了, autoplay="autoplay"表示自动播放, loop="loop"循环播放。

下面继续改造,要控制暂停和播放。加入一个按钮,点击按钮停止播放背景音乐,再次点击继续背景音乐。
要实现就要用到JS,用到播放和.play()和暂停.pause()。

    <script>
      function autoPlay() {
            var myAuto = document.getElementById("music2");
            myAuto.play();
        }
        function closePlay() {
            var myAuto = document.getElementById("music2");
            myAuto.pause();
        }    
    </script>


按钮用图标显示2种状态,CSS如下:

<style>
body {background-color:#b0c4de;}
.music.pause {
    background-position: -65px 0;
}
.music {
    display: block;
    width: 32px;
    height: 30px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAAAgCAMAAADJyc2SAAAAe1BMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////NgkbwAAAAKHRSTlMAh/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);
}
</style>

小图片转码为base64,

接着下来用JS切换按钮状态并控制播放与暂停。

<script>
function changeImage()
{
    if (document.getElementById("mus").className == "music")
    {
        document.getElementById("mus").className = "music pause";
        closePlay();
    }
    else
    {
        document.getElementById("mus").className = "music";
        autoPlay();
    }
}
</script>


将播放/暂停按钮位置固定在网页的右上
<a href="javascript:void(0);" id="mus" class="music" onclick="changeImage()"></a>

放入网页打开试了一下,就是感觉没有动态效果,以后加点动态效果,之前网上好像有一段代码背景音乐带一个旋转图标的,有兴趣可以找一下。

下面是完整代码:


<audio src="web201907/www.goodtext.cn/music.mp3" loop="loop"  id="music2" autoplay="autoplay"></audio>

<a href="javascript:;" id="mus" class="music" onclick="changeImage()"></a>

<style>
body {background-color:#b0c4de;}
.music.pause {
    background-position: -65px 0;
}
.music {
    display: block;
    width: 32px;
    height: 30px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAAAgCAMAAADJyc2SAAAAe1BMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////NgkbwAAAAKHRSTlMAh/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);
}
</style>

    <script language="javascript" type="text/javascript">
      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
    }
}

</script>

用几款浏览器测了下,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 来源:网络

热门标签

首页 - 导航 - 免责 - 官方微信 - 用户反馈

© 2019 GOODTEXT.CN