HTML5音频元素（<audio>）是一种用于在网页上播放音频的标准方法。它提供了一组内置的控件，可以让用户控制音频的播放、暂停、调整音量等。在某些情况下，我们可能需要通过代码来停止音频的播放。本文将介绍如何使用HTML5和JavaScript来停止音频的播放。
首先，我们需要创建一个HTML5音频元素并添加一些控件来控制音频的播放。以下是一个简单的示例：
<audio id="myAudio" controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
在上面的代码中，我们使用了<audio>元素来创建一个音频播放器，并添加了一个controls属性，以便显示默认的控制面板。<source>元素用于指定音频文件的路径和类型。
接下来，我们需要使用JavaScript来控制音频的播放。我们可以通过获取音频元素的引用并使用其内置的方法来实现。以下是一个示例：
var audio = document.getElementById("myAudio");
function playAudio() {
audio.play();
}
function pauseAudio() {
audio.pause();
}
function stopAudio() {
audio.pause();
audio.currentTime = 0;
}
在上面的代码中，我们首先使用document.getElementById()方法获取音频元素的引用，并将其存储在audio变量中。然后，我们定义了三个函数来控制音频的播放。
playAudio()函数用于播放音频，它使用了音频元素的play()方法。pauseAudio()函数用于暂停音频，它使用了音频元素的pause()方法。stopAudio()函数用于停止音频的播放，它首先调用pause()方法暂停音频，然后将音频的当前时间（currentTime）设置为0，以便在下次播放时从头开始。
为了使上述功能可用，我们可以在页面上添加一些按钮，并将这些函数与按钮的点击事件关联起来。以下是一个示例：
<button onclick="playAudio()">播放</button>
<button onclick="pauseAudio()">暂停</button>
<button onclick="stopAudio()">停止</button>
在上面的代码中，我们使用了onclick属性将每个按钮与相应的函数关联起来。当用户点击按钮时，相应的函数将被调用，从而控制音频的播放。
通过上述代码，我们可以实现通过点击按钮来控制音频的播放、暂停和停止。当我们点击“播放”按钮时，音频将开始播放；点击“暂停”按钮时，音频将暂停播放；点击“停止”按钮时，音频将停止播放并返回到开始位置。
最后，我们可以使用饼状图来可视化音频的播放状态。以下是一个使用mermaid语法中的pie标识的示例：
pie
title 音频播放状态
"正在播放" : 80
"已暂停" : 20
在上面的代码中，我们使用了mermaid语法中的pie标识来创建一个饼状图。我们为饼状图设置了一个标题“音频播放状态”，并分别指定了“正在播放”和“已暂停”两个部分的比例。
除了饼状图，我们还可以使用序列图来说明代码执行的顺序。以下是一个使用mermaid语法中的sequenceDiagram标识的示例：
sequenceDiagram
participant 用户
participant 播放按钮
participant 暂停按钮
participant 停止按钮
participant 音频元素
用户->>播放按钮: 点击
播放按钮->>音频元素: 调用play()方法
音频元素->>音频元素: 开始播放音频
用户->>暂停按钮: 点击
暂停按钮->>音频元素: 调用pause()方法
音频元素->>音频元素: 暂停播放音频
