发布时间：2025-12-10 13:16:53 浏览次数：5
HTML5 网页背景音乐代码考虑到在网页设计中音乐也是一个很重要的元素，在 HTML5 中提供了一些新的特性让我们方便调用音乐。以下是一个使用HTML5在网页中添加背景音乐的例子。
首先我们需要在 head 标签中使用 script 标签引入 jQuery 库和音乐文件。
<head><script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script><audio src="music/background.mp3" autoplay loop preload="metadata"></audio></head>然后在 body 中添加控制音乐的按钮，定义标签的样式。
<body><button ></button></body>接着，在 JavaScript 中编写点击按钮后控制音乐的代码。
<script type="text/javascript">$(function() {var audio = document.getElementById('music');var musicBtn = document.getElementById('musicBtn');musicBtn.onclick = function() {if (audio.paused) {audio.play();musicBtn.className = 'music-btn playing';} else {audio.pause();musicBtn.className = 'music-btn pause';}};});</script>最后，使用 CSS 定义按钮的样式。
<style>.music-btn {width: 50px;height: 50px;border-radius: 50%;position: fixed;bottom: 20px;right: 20px;background: url('img/music-play.png') no-repeat;background-size: 100%;-webkit-transition: background 0.3s;transition: background 0.3s;}.playing {background-image: url('img/music-pause.png');background-size: 100%;}.pause {background-image: url('img/music-play.png');background-size: 100%;}</style>这样就可以在你的网页中轻松添加背景音乐了。
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流