整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
在多個HTML頁面之間切換時持續播放背景音樂，可以使用JavaScript和localStorage來實現。這里有一個簡單的實現方案：
下面是一個簡化版的多頁面背景音樂連續播放的Demo示例。這個例子包含兩個HTML文件：index.html 和 page2.html。請確保你有相應的音頻文件（如music.mp3）并放置在與HTML文件相同的目錄下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>首頁</title>
<style>
#backgroundMusic {
display: none;
}
</style>
</head>
<body>
<h1>首頁</h1>
<p>這是首頁，背景音樂會持續播放。</p>
<a href="page2.html">前往第二頁</a>
<audio controls id="backgroundMusic" loop>
<source src="https://img.mtsws.cn/LightPicture/2023/08/45f935a39d0189c0.mp3" type="audio/mpeg" />
您的瀏覽器不支持 audio 元素。
</audio>
<script>
document.addEventListener('DOMContentLoaded', function () {
var audio = document.getElementById('backgroundMusic')
setupMusic(audio)
})
function setupMusic(audio) {
var musicTime = parseFloat(localStorage.getItem('musicTime')) || 0
var isPlaying = localStorage.getItem('musicPlaying') === 'true'
audio.currentTime = musicTime
if (isPlaying) {
audio.play().catch(function (error) {
console.error('自動播放被阻止:', error)
})
}
audio.onplay = function () {
localStorage.setItem('musicPlaying', true)
}
audio.onpause = function () {
localStorage.setItem('musicPlaying', false)
}
audio.ontimeupdate = function () {
localStorage.setItem('musicTime', audio.currentTime)
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第二頁</title>
<style>
#backgroundMusic { display: none; }
</style>
</head>
<body>
<h1>第二頁</h1>
<p>切換到第二頁，背景音樂仍然連續播放。</p>
<a href="index.html">返回首頁</a>
<audio id="backgroundMusic" src="music.mp3" loop></audio>
<script>
document.addEventListener('DOMContentLoaded', function() {
var audio = document.getElementById('backgroundMusic');
setupMusic(audio);
});
// 與index.html中相同的setupMusic函數，確保音樂播放邏輯一致
function setupMusic(audio) {/*...函數內容與上文相同...*/}
</script>
</body>
</html>在這個示例中，index.html 和 page2.html 都包含了相同的JavaScript邏輯來管理背景音樂的播放狀態和時間。當用戶在頁面間導航時，音樂將會無縫繼續播放，而不是重新開始。請根據實際需要調整音頻文件路徑和其他細節。
了美化網站，我在網站上面添加了一個HTML懸浮音樂播放器，先來看看一下效果圖。
如何在自己的網站上添加HTML懸浮音樂播放器呢？今天和你們分享
首先申明三點：
1、本播放器實際上是調用網易云音樂的音樂進行播放，音樂版權歸網易云音樂所有，僅供個人學習研究，用于商用的后果自負！
2、本播放器的演示效果可以在我的博客首頁看到，默認支持所有Html和PHP環境的網站。
3、本播放器可以使用電腦、手機、IPAD等設備訪問，自適應。）
具體的操作方法：
在網站源文件中（如果有單獨的頁腳文件，也可以放在頁腳文件里面）添加這三行代碼：
<!--音樂播放器-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://myhkw.cn/player/js/player.js" id="myhk" key="demo" m="1"></script>
然后保存發布，在瀏覽器刷新網頁就看到效果了
家好，今天給大家介紹一款，調用酷狗搜索音樂播放API實例html頁面源碼（圖1），實現搜索和音樂播放。送給大家哦，獲取方式在本文末尾，需要的朋友可以下載學習
圖1
搜索結構顯示后，點擊播放按鈕即可播放，同時會顯示歌詞，歌詞可以關閉，同時可以控制播放模式（圖2）
圖2
本模板編碼：10107，需要的朋友，點擊下面的鏈接后，搜索10107，即可獲取。
就愛UI - 分享UI設計的點點滴滴
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
