一个按钮button实现播放停止
要实现一个按钮既可以播放又可以停止的功能，你可以使用JavaScript来控制HTML5的<audio> 或 <video>演示如何实现这个功能：
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>播放停止按钮</title>
</head>
<body>
<audio id="myAudio" src="你的音频文件路径.mp3"></audio>
<button id="playPauseBtn">播放</button>
<script src="script.js"></script>
</body>
</html>
JavaScript部分（script.js）
document.addEventListener('DOMContentLoaded', (event) =>
{
const audio = document.getElementById('myAudio');
const playPauseBtn = document.getElementById('playPauseBtn');
let isPlaying = false;
playPauseBtn.addEventListener('click', () =>
{
if (isPlaying)
{
audio.pause();
playPauseBtn.textContent = '播放';
}
else
{
audio.play();
playPauseBtn.textContent = '停止';
}
isPlaying = !isPlaying;
});
// 可选：处理音频播放完毕事件，更新按钮状态
audio.addEventListener('ended', () =>
{
isPlaying = false;
playPauseBtn.textContent = '播放';
}
);
});
解释
HTML部分:
一个 <audio> 元素，用于加载音频文件。你需要将 src 属性替换为你的音频文件路径。
一个按钮 <button>，初始文本为“播放”。
JavaScript部分:
使用 DOMContentLoaded 事件确保DOM完全加载后再执行脚本。
获取 <audio> 和 <button> 元素。
定义一个布尔变量 isPlaying 来跟踪音频是否正在播放。
为按钮添加点击事件监听器。当按钮被点击时，检查 isPlaying 的值：
如果 isPlaying 为 true（音频正在播放），则调用 audio.pause() 暂停音频，
并将按钮文本更改为“播放”。
如果 isPlaying 为 false（音频未播放），则调用 audio.play() 播放音频，并将按钮文本
更改为“停止”。
每次点击按钮后，反转 isPlaying 的值。
可选：处理音频播放完毕事件（ended），将 isPlaying 设置为 false 并更新按钮文本为
“播放”。
这样，你就可以用一个按钮来控制音频的播放和停止了。
提示：AI自动生成，仅供参考
