在多個HTML頁面之間切換時持續(xù)播放背景音樂,可以使用JavaScript和localStorage來實現(xiàn)。這里有一個簡單的實現(xiàn)方案:
下面是一個簡化版的多頁面背景音樂連續(xù)播放的Demo示例。這個例子包含兩個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>這是首頁,背景音樂會持續(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('自動播放被阻止:', 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>
在這個示例中,index.html 和 page2.html 都包含了相同的JavaScript邏輯來管理背景音樂的播放狀態(tài)和時間。當(dāng)用戶在頁面間導(dǎo)航時,音樂將會無縫繼續(xù)播放,而不是重新開始。請根據(jù)實際需要調(diào)整音頻文件路徑和其他細(xì)節(jié)。
音頻是網(wǎng)頁承載內(nèi)容很重要的一個元素,也是必不可少的網(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 自動播放
loop 循環(huán)播放
preload 預(yù)加載
音頻代碼
每一種瀏覽器自帶的音頻播放控制器都不一樣,但功能都一樣。網(wǎng)上看到的播放器,大多數(shù)都是改過它的樣式。
瀏覽器自帶的音頻控制條
<audio> 元素支持三種視頻格式: MP4, WebM, 和 Ogg。
如果不確定音頻格式是哪個格式,可以使用source標(biāo)簽。<source> 元素可以鏈接不同格式的視頻文件,瀏覽器將使用第一個可識別的格式。
支持多種格式
audio總結(jié)
能是出于節(jié)省用戶流量,許多移動端瀏覽器都不支持H5自動播放視頻,必須在用戶主動交互(點擊或者滑動等)后才可以通過js播放視頻
PC端可以通過設(shè)置muted,自動播放靜音視頻
安卓瀏覽器均不支持自動播放,實測在微信內(nèi)置瀏覽器,滑動視為交互行為,可以在這之后播放視頻,抖音內(nèi)置瀏覽器則需要點擊交互,鴻蒙系統(tǒng)瀏覽器可以自動播放靜音視頻
進(jìn)入網(wǎng)站時彈窗,例如歡迎語等,用戶點擊關(guān)閉后執(zhí)行視頻播放
簡單粗暴的方法,在某些場景時適用的,實測在安卓、鴻蒙、IOS、抖音瀏覽器等均可以用這個方法解決
close() {
const videos = document.querySelectorAll('video');
for (let i = 0; i < videos.length; i++) {
const element = videos[i];
element.play();
}
}
【更多音視頻學(xué)習(xí)資料,點擊下方鏈接免費領(lǐng)取↓↓,先碼住不迷路~】
點擊領(lǐng)取→音視頻開發(fā)基礎(chǔ)知識和資料包
將視頻轉(zhuǎn)成ts格式,通過jsmpeg解碼器進(jìn)行加載播放,可以實現(xiàn)自動播放,實測基本上可以解決所有移動端無法播放視頻的問題
轉(zhuǎn)ts
安裝ffmpeg,輸入命令將mp4轉(zhuǎn)成ts
ffmpeg.exe -i in.mp4 -f mpegts -codec:v mpeg1video -s 680x1080 -b:v 2074k -r 29.97 out.ts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
// 引入jsmpeg
<script src="./jsmpeg.min.js"></script>
<style>
#canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas" height="750" width="750"></canvas>
<script>
var canvas = document.querySelector("#canvas");
// 加載ts文件
var player = new JSMpeg.Player("./out.ts", {
canvas: canvas,
loop: true, // 循環(huán)播放
autoplay: true, // 自動播放
audio: false, // 禁用音頻
});
player.play();
</script>
</body>
</html>
<video webkit-playsinline="webkit-playsinline" playsinline></video>
如果你對音視頻開發(fā)感興趣,覺得文章對您有幫助,別忘了點贊、收藏哦!或者對本文的一些闡述有自己的看法,有任何問題,歡迎在下方評論區(qū)討論!
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。