在多个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逻辑来管理背景音乐的播放状态和时间。当用户在页面间导航时,音乐将会无缝继续播放,而不是重新开始。请根据实际需要调整音频文件路径和其他细节。
家好,今天给大家介绍一款,调用酷狗搜索音乐播放API实例html页面源码(图1),实现搜索和音乐播放。送给大家哦,获取方式在本文末尾,需要的朋友可以下载学习
图1
搜索结构显示后,点击播放按钮即可播放,同时会显示歌词,歌词可以关闭,同时可以控制播放模式(图2)
图2
本模板编码:10107,需要的朋友,点击下面的链接后,搜索10107,即可获取。
就爱UI - 分享UI设计的点点滴滴
音频是网页承载内容很重要的一个元素,也是必不可少的网页表现形式(图、文、表、视、音)之一。缺少声音的网站,就如同人不能说话一样。曾经网页要想播放音频,必须得用第三方插件flash。随着html5标准逐渐普及,如今几乎所有的浏览器都使用html5来播放音频。
目标
作用是在 HTML 页面中嵌入音频元素,来播放声音文件或者音频流。
网页版的音乐播放器
src 音频的播放源(必须)
controls 浏览器自带的控制条(必须)
autoplay 自动播放
loop 循环播放
preload 预加载
音频代码
每一种浏览器自带的音频播放控制器都不一样,但功能都一样。网上看到的播放器,大多数都是改过它的样式。
浏览器自带的音频控制条
<audio> 元素支持三种视频格式: MP4, WebM, 和 Ogg。
如果不确定音频格式是哪个格式,可以使用source标签。<source> 元素可以链接不同格式的视频文件,浏览器将使用第一个可识别的格式。
支持多种格式
audio总结
*请认真填写需求信息,我们会在24小时内与您取得联系。