怎样在HTML中实现网页声音的一键暂停？

<div class="article-content">
  <section class="intro">
    <p>在网页中添加音频播放功能时，控制声音的暂停是提升用户体验的关键操作，本文将通过<strong>HTML与JavaScript结合</strong>的方式，详细解析实现音频暂停功能的具体方法，并提供可直接复用的代码示例。</p>
  </section>
  <section class="step-by-step">
    <h3>一、基础实现：使用HTML5 audio标签</h3>
    <div class="code-example">
      <pre><code>&lt;audio id="myAudio" controls&gt;
  &lt;source src="audio-file.mp3" type="audio/mpeg"&gt;
  您的浏览器不支持audio标签
&lt;/audio&gt;</code></pre>
    </div>
    <p>浏览器自带的控制条已包含暂停按钮，如需自定义控制逻辑，需通过JavaScript实现。</p>
    <h3>二、JavaScript控制进阶</h3>
    <div class="interactive-demo">
      <div class="audio-controls">
        <button onclick="playAudio()">▶️ 播放</button>
        <button onclick="pauseAudio()">⏸️ 暂停</button>
      </div>
      <script>
        const myAudio = document.getElementById("myAudio");
        function playAudio() { myAudio.play(); }
        function pauseAudio() { myAudio.pause(); }
      </script>
    </div>
    <div class="code-example">
      <pre><code>&lt;button onclick="playAudio()"&gt;播放&lt;/button&gt;
&lt;button onclick="pauseAudio()"&gt;暂停&lt;/button&gt;
&lt;script&gt;
  const audioElement = document.getElementById('myAudio');
  function playAudio() {
    audioElement.play();
  }
  function pauseAudio() {
    audioElement.pause();
  }
&lt;/script&gt;</code></pre>
    </div>
    <h3>三、状态检测与高级控制</h3>
    <div class="code-example">
      <pre><code>// 检测播放状态
if(audioElement.paused) {
  audioElement.play();
} else {
  audioElement.pause();
}
// 添加事件监听
audioElement.addEventListener('pause', () => {
  console.log('音频已暂停');
});</code></pre>
    </div>
  </section>
  <section class="best-practices">
    <h3>最佳实践建议</h3>
    <ul class="tip-list">
      <li> 始终提供视觉反馈：按钮状态应随播放状态变化</li>
      <li> 兼容性处理：针对旧版浏览器提供fallback方案</li>
      <li> 移动端优化：注意浏览器的自动播放限制</li>
      <li> 性能优化：预加载设置根据场景选择metadata/none/auto</li>
    </ul>
  </section>
  <section class="qa">
    <h3>常见问题解答</h3>
    <div class="qa-item">
      <p class="question">Q：为什么移动端无法自动播放？</p>
      <p class="answer">A：多数移动浏览器限制自动播放功能，必须由用户手势触发（如点击事件）</p>
    </div>
  </section>
  <footer class="references">
    <p>参考文档：</p>
    <ul>
      <li>MDN Web Docs: HTML audio element</li>
      <li>W3School: HTML5 Audio</li>
      <li>Web Audio API 规范</li>
    </ul>
  </footer>
</div>
<style>
.article-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  font-family: 'Segoe UI', system-ui;
  line-height: 1.6;
}
.code-example {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem 0;
}
.best-practices .tip-list {
  background: #e3f2fd;
  padding: 1.5rem;
  border-left: 4px solid #2196f3;
}
.qa-item {
  margin: 1.5rem 0;
  padding: 1rem;
  background: #fff3e0;
  border-radius: 4px;
}
.references {
  margin-top: 2rem;
  color: #666;
  font-size: 0.9em;
}
</style>