如何通过HTML实现audio停止
什么是HTML5的audio标签？
HTML5的audio标签是一种用于在网页中播放音乐或音频的标签。它允许在浏览器中嵌入音频文件并控制它们的播放，暂停和停止。在HTML5之前，网页开发人员必须依靠使用插件（如Flash或QuickTime）才能在网页中播放音频文件。
如何在HTML中使用audio标签？
要在HTML中使用audio标签，可以按如下格式编写代码：
<audio src="音频文件地址"></audio>
其中，"src"属性指定音频文件的地址。像这样：
<audio src="music.mp3"></audio>
如何实现audio停止
要实现音频的停止，可以使用HTML5的JavaScript API。具体地说，可以使用"pause()"混合"currentTime"方法将音频停止在当前位置。"pause()"方法将音频暂停，"currentTime"属性设置当前时间为0，从而停止音频。代码如下：
<audio id="audio" controls src="music.mp3"></audio>
<button onclick="stopAudio()">停止</button>
<script>
let audio = document.getElementById("audio");
function stopAudio() {
audio.pause();
audio.currentTime = 0;
}
</script>
在这里，我们为音频元素定义了一个id为"audio"的唯一标识符，并为其添加了一个控件。我们还创建了一个按钮元素，在单击该按钮时将调用"stopAudio()"函数。该函数使用"pause()"方法将音频暂停，使用"currentTime"属性将当前时间重置为0。
如何在HTML中实现音频停止的样式？
使用CSS，可以美化停止按钮并使其看起来更像按钮。例如，我们可以为按钮添加背景颜色，阴影和圆角：
<style>
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 8px;
box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.75);
}
</style>
然后，我们将按钮元素添加到两个容器中：一个是audio标签之前的div，另一个是按钮本身。我们使用CSS将按钮放在音频控制条下方，并使用JavaScript将按钮从任何位置移至其正确的位置：
<div style="position: relative">
<audio id="audio" controls src="music.mp3"></audio>
<button onclick="stopAudio()" id="stopButton">停止</button>
</div>
<script>
let audio = document.getElementById("audio");
let stopButton = document.getElementById("stopButton");
let audioRect = audio.getBoundingClientRect();
stopButton.style.top = (audioRect.bottom - stopButton.offsetHeight / 2) + "px";
stopButton.style.left = (audioRect.right - stopButton.offsetWidth - 10) + "px";
function stopAudio() {
audio.pause();
audio.currentTime = 0;
}
</script>
脚本"stopAudio()"保持不变，但我们有两个额外变量：一个是包含音频和按钮的div的引用，另一个是停止按钮的引用。我们使用JavaScript的"getBoundingClientRect()"方法获取音频元素的位置矩形，并使用其信息将停止按钮定位在正确的位置。
总结
HTML5的audio标签允许在网页中嵌入音频文件并控制它们的播放、暂停和停止。我们可以使用"pause()"和"currentTime"方法将音频停止在当前位置，也可以使用CSS美化停止按钮并确保它放置在音频控制条下方。