HTML, CSS, JS 实现音乐无缝循环播放:跨页面持续播放
<!DOCTYPE html>
<html>
<head>
<title>音乐播放器</title>
<style>
body {
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<h1>音乐播放器</h1>
<button id="playButton">播放音乐</button>
<script>
var audio = new Audio('音乐文件的URL');
audio.loop = true; // 设置音乐循环播放
document.getElementById('playButton').addEventListener('click', function() {
window.location.href = 'second.html'; // 跳转到第二个页面
});
audio.play(); // 播放音乐
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>第二个页面</title>
</head>
<body>
<h1>第二个页面</h1>
<p>这是第二个页面,没有与用户的交互。</p>
<script>
var audio = new Audio('音乐文件的URL');
audio.loop = true; // 设置音乐循环播放
audio.play(); // 继续播放音乐
</script>
</body>
</html>
<p>以上程序中,第一个html页面中的按钮点击事件会跳转到第二个html页面。第一个页面通过创建<code><audio></code>元素并设置<code>loop</code>属性为<code>true</code>来播放音乐。第二个页面也会创建一个<code><audio></code>元素,并继续播放音乐。通过这种方式,无论用户跳转到哪个页面,音乐都会继续播放。请注意替换代码中的音乐文件URL为实际的音乐文件URL。</p>
原文地址: https://www.cveoy.top/t/topic/pNfN 著作权归作者所有。请勿转载和采集!