網頁跳轉背景音樂不間斷播放

跟著網站的多元素成長，一個網站給人們體驗是至關主要的。我們可能經常瀏覽網站的時辰會履歷過，一個首頁是有布景音樂主動播放的，可是我們點擊到內容頁面的時辰會發現，布景音樂就會從0:00的進度從頭起頭播放，這就會讓人感覺反感，但只要我們可使網頁跳轉時布景音樂可以持續不間斷播放，如許的結果就紛歧樣了。那站長們應該怎么實現呢？

思緒：(1)我們可以利用框架(Frame)來解決;但懂點SEO優化的站長都知道，采納框架這種方式對搜刮引擎長短常的不友愛，晦氣于被收錄；

(2)我們可以利用js+html5，再挪用幾個api與瀏覽器的內核+cookie方式來解決；一來可以不利用框架的環境下網頁跳轉布景音樂維持本來的進度持續不間斷播放；二來不影響搜刮引擎的友愛。

(3)因為考慮到瀏覽器內存的挪用機制，我們在利用音樂文件定名的方式最好是1.mp3,若是有多首布景音樂可以定名如：2.mp3....以此類推；

(4)因為網站都在辦事器內，至于音頻文件的存放路徑，可覺得相對路徑與路徑挪用，最簡單的方式可以直接挪用域名，然后在域名后面加上路徑就可以了

東西/原料

Sublime,Webstorm，DW等等都可以

方式/步調

1
我們為了簡單測試結果，我們可以簡單成立兩個相對應網頁做好超鏈接，我們把一個網頁定名為/new/test.html,第二個網頁定名為index.html;
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網頁跳轉布景音樂不間斷測試頁面一</title>
</head>
<body>
<a href="http://www.bjsyxc.com/index.html">點擊進入測試二網頁</a>
</body>
</html>
2
第二個網頁代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網頁跳轉布景音樂不間斷測試頁面二</title>
</head>
<body>
<a href="http://www.bjsyxc.com/news/index.html">點擊進入測試一網頁</a>
</body>
</html>
3
這時辰有人會說，若是有多首布景音樂的話，能不克不及有按鈕節制，有不影響音樂的不間斷播放呢？謎底是可以必定的。因為原始按鈕不太美不雅，我可以在網上找一些適合做按鈕的圖片或者利用photoshop建造一些素材引用即可。這時辰我們考慮到按鈕是否會影響頁面內容的問題，我們可以利用一下樣式來讓按鈕豎直標的目的下的懸浮在瀏覽器的左側；
按鈕樣式代碼如下：
4
焦點js代碼如下：
5
小編在這里需要申明幾點代碼中會呈現這幾句代碼：
//下一首歌曲切換
bgm_btn_next.onclick = function(){
var bgm_gds = bgm.getAttribute('value');
if(bgm_gds < 3)
注：音樂播放完會主動播放一下曲，此中if判定語句里面的3代表你的辦事器里面布景音樂的數目總數，若是只有一首布景音樂就直接改為1即可，依次類推。
6
因為考慮到瀏覽器內存的挪用機制，我們在利用音樂文件定名的方式最好是1.mp3,若是有多首布景音樂可以定名如：2.mp3....以此類推；
布景音樂可以直接挪用域名，然后在域名后面加上音頻的路徑與文件名就可以了。
7
關于擺設的問題，可以將上面所說起到的css樣式與js,保留為一個外部的文件，然后在網站的所有網頁內部挪用即可，然后在域名后面加上外部挪用的css與js文件路徑與其文件名。