制作一個遊戲網站首頁，要求加入背景音樂
上面一行解決了， 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 來源:網絡