HTML5 Audio(音频)学习笔记
1. 简介
HTML5引入了很多新的标签和API，其中之一就是音频标签<audio>。使用<audio>标签可以在网页上嵌入音频文件，让用户能够在网页上直接播放音频。
2. 基本用法
<audio>标签的基本用法如下：
htmlCopy Code<audio src="audio.mp3"></audio>
其中，src属性指定要播放的音频文件的URL。使用这种方式只能播放默认控件，无法自定义。
3. 自定义控件
使用<audio>标签可以轻松地在网页上嵌入音频文件，但是默认的控件可能不能满足所有需求，这时候我们就需要自定义控件。以下是一个带有自定义控件的<audio>标签示例：
htmlCopy Code<audio id="myAudio" controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="setVolume(0.5)">Volume 50%</button>
我们为<audio>标签添加了id属性，然后在后面定义了几个按钮，用来控制播放、暂停、调整音量和控制大小。如果浏览器不支持<audio>标签，会显示Your browser does not support the audio element.。
接下来是JavaScript代码：
javascriptCopy Codevar myAudio = document.getElementById("myAudio");
function playPause() {
if (myAudio.paused)
myAudio.play();
else
myAudio.pause();
}
function makeBig() {
myAudio.width = 560;
}
function makeSmall() {
myAudio.width = 320;
}
function setVolume(volume) {
myAudio.volume = volume;
}
这里使用document.getElementById方法获取<audio>标签，然后定义了几个函数来控制播放、暂停、调整音量和控制大小。
4. 实例
以下是一个实例，演示如何使用<audio>标签和自定义控件播放音频文件。
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Audio Example</title>
<style type="text/css">
#myAudio {
border: 1px solid black;
}
</style>
<script type="text/javascript">
var myAudio = document.getElementById("myAudio");
function playPause() {
if (myAudio.paused)
myAudio.play();
else
myAudio.pause();
}
function makeBig() {
myAudio.width = 560;
}
function makeSmall() {
myAudio.width = 320;
}
function setVolume(volume) {
myAudio.volume = volume;
}
</script>
</head>
<body>
<audio id="myAudio" controls>
<source src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="setVolume(0.5)">Volume 50%</button>
</body>
</html>
该实例中，音频文件是从一个公开的在线资源获取的。我们为<audio>标签添加了controls属性来显示默认控件，然后定义了几个按钮，用来控制播放、暂停、调整音量和控制大小。
以上就是HTML5音频学习笔记的简要介绍，希望对你有所帮助！