整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
在多個(gè)HTML頁面之間切換時(shí)持續(xù)播放背景音樂，可以使用JavaScript和localStorage來實(shí)現(xiàn)。這里有一個(gè)簡單的實(shí)現(xiàn)方案：
下面是一個(gè)簡化版的多頁面背景音樂連續(xù)播放的Demo示例。這個(gè)例子包含兩個(gè)HTML文件：index.html 和 page2.html。請確保你有相應(yīng)的音頻文件（如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>這是首頁，背景音樂會(huì)持續(xù)播放。</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('自動(dòng)播放被阻止:', 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>切換到第二頁，背景音樂仍然連續(xù)播放。</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函數(shù)，確保音樂播放邏輯一致
function setupMusic(audio) {/*...函數(shù)內(nèi)容與上文相同...*/}
</script>
</body>
</html>在這個(gè)示例中，index.html 和 page2.html 都包含了相同的JavaScript邏輯來管理背景音樂的播放狀態(tài)和時(shí)間。當(dāng)用戶在頁面間導(dǎo)航時(shí)，音樂將會(huì)無縫繼續(xù)播放，而不是重新開始。請根據(jù)實(shí)際需要調(diào)整音頻文件路徑和其他細(xì)節(jié)。
家好，今天給大家介紹一款，調(diào)用酷狗搜索音樂播放API實(shí)例html頁面源碼（圖1），實(shí)現(xiàn)搜索和音樂播放。送給大家哦，獲取方式在本文末尾，需要的朋友可以下載學(xué)習(xí)
圖1
搜索結(jié)構(gòu)顯示后，點(diǎn)擊播放按鈕即可播放，同時(shí)會(huì)顯示歌詞，歌詞可以關(guān)閉，同時(shí)可以控制播放模式（圖2）
圖2
本模板編碼：10107，需要的朋友，點(diǎn)擊下面的鏈接后，搜索10107，即可獲取。
就愛UI - 分享UI設(shè)計(jì)的點(diǎn)點(diǎn)滴滴
音頻是網(wǎng)頁承載內(nèi)容很重要的一個(gè)元素，也是必不可少的網(wǎng)頁表現(xiàn)形式（圖、文、表、視、音）之一。缺少聲音的網(wǎng)站，就如同人不能說話一樣。曾經(jīng)網(wǎng)頁要想播放音頻，必須得用第三方插件flash。隨著html5標(biāo)準(zhǔn)逐漸普及，如今幾乎所有的瀏覽器都使用html5來播放音頻。
目標(biāo)
作用是在 HTML 頁面中嵌入音頻元素，來播放聲音文件或者音頻流。
網(wǎng)頁版的音樂播放器
src 音頻的播放源（必須）
controls 瀏覽器自帶的控制條（必須）
autoplay 自動(dòng)播放
loop 循環(huán)播放
preload 預(yù)加載
音頻代碼
每一種瀏覽器自帶的音頻播放控制器都不一樣，但功能都一樣。網(wǎng)上看到的播放器，大多數(shù)都是改過它的樣式。
瀏覽器自帶的音頻控制條
<audio> 元素支持三種視頻格式： MP4, WebM, 和 Ogg。
如果不確定音頻格式是哪個(gè)格式，可以使用source標(biāo)簽。<source> 元素可以鏈接不同格式的視頻文件，瀏覽器將使用第一個(gè)可識別的格式。
支持多種格式
audio總結(jié)
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
