html页面音乐播放代码csdn
时间: 2023-10-31 16:02:58 浏览: 146
以下是一个简单的HTML页面上使用HTML5音乐播放器的代码示例:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>音乐播放器</title>
</head>
<body>
<audio id="audioPlayer" controls>
<source src="音乐文件路径" type="audio/mp3">
您的浏览器不支持音频播放。
</audio>
<script>
var audio = document.getElementById("audioPlayer"); // 获取音频元素
// 当音频加载完毕,可以播放时触发
audio.oncanplay = function() {
console.log("音频已加载,可以播放");
};
// 当音频播放结束时触发
audio.onended = function() {
console.log("音频播放结束");
};
// 播放音频
function play() {
audio.play();
}
// 暂停音频
function pause() {
audio.pause();
}
</script>
</body>
</html>
```
在上面的代码中,使用了`<audio>`元素来定义一个音频播放器,并通过`src`属性指定要播放的音乐文件路径。当用户点击浏览器默认控件中的播放按钮时,音频开始播放。而`audio`对象的`play`和`pause`方法可以通过JavaScript进行控制,从而实现播放和暂停功能。此外,还可以通过监听`oncanplay`事件来在音频加载完毕后进行操作,以及通过监听`onended`事件来在音频播放结束后进行操作。
阅读全文