html如何为网页添加背景音乐?

78次阅读
没有评论

在 HTML 中添加背景音乐通常使用 audio 元素,可以通过设置 autoplay 属性来自动播放音乐,loop 属性来实现循环播放。


以下是一个简单的示例,假设音乐文件名为 music.mp3:

<audio autoplay loop>
    <source src="music.mp3" type="audio/mp3">
</audio>

上述代码中,audio 元素用于添加音乐,autoplay 属性表示自动播放,loop 属性表示循环播放。source 元素指定音乐文件的路径和格式。

注意,为了保证音乐文件能够在不同的浏览器上播放,需要为 source 元素指定多个音乐文件的路径和格式。例如:

<audio autoplay loop>
    <source src="music.mp3" type="audio/mp3">
    <source src="music.ogg" type="audio/ogg">
</audio>

上述代码中,使用了两个 source 元素,分别指定了 MP3 和 Ogg 格式的音乐文件。如果浏览器不支持 MP3 格式,则会自动使用 Ogg 格式的音乐文件。

另外,为了提高用户体验,通常会在页面中添加一个控制音乐播放的按钮,例如:

<audio id="music" loop>
    <source src="music.mp3" type="audio/mp3">
    <source src="music.ogg" type="audio/ogg">
</audio>

<button onclick="document.getElementById('music').play()">播放</button>
<button onclick="document.getElementById('music').pause()">暂停</button>

上述代码中,audio 元素的 id 属性为 music,两个按钮分别通过 onclick 属性调用 play() 和 pause() 方法控制音乐的播放和暂停。

完整示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>层叠效果示例</title>
    <style>

    </style>
</head>
<body>
<audio id="music" autoplay loop>
    <source src="http://music.163.com/song/media/outer/url?id=447925558.mp3" type="audio/mp3">
</audio>
<button onclick="document.getElementById('music').play()">播放</button>
<button onclick="document.getElementById('music').pause()">暂停</button>
</body>
</html>
正文完
 
评论(没有评论)