HTML <audio> src 属性

在网页开发中，<audio> 标签用于在网页中嵌入音频内容。其中，src 属性用于指定音频文件的 URL 地址，让浏览器能够加载并播放音频文件。

语法

<audio src="audio.mp3" controls>
  Your browser does not support the audio element.
</audio>

在上面的示例中，src 属性指定了音频文件的路径，controls 属性添加了浏览器默认的音频播放控件。

支持的音频格式

浏览器对不同的音频格式支持程度不同，常见的音频格式包括 MP3、WAV、OGG。为了确保音频文件能够在不同浏览器中正常播放，建议提供多种格式的音频文件，例如：

<audio controls>
  <source src="audio.mp3" type="audio/mp3">
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.wav" type="audio/wav">
  Your browser does not support the audio element.
</audio>

在上面的示例中，提供了 MP3、OGG、WAV 三种不同格式的音频文件，浏览器会根据支持的格式选择最适合的音频文件进行播放。

控件设置

除了使用 controls 属性添加默认的音频播放控件外，还可以通过 JavaScript 控制音频文件的播放、暂停、音量等操作。例如：

// www.javascriptcn.com code example
<audio id="myAudio" src="audio.mp3">
  Your browser does not support the audio element.
</audio>

<button onclick="playAudio()">Play</button>
<button onclick="pauseAudio()">Pause</button>
<button onclick="setVolume(0.5)">Set Volume</button>

<script>
  var audio = document.getElementById("myAudio");

  function playAudio() {
    audio.play();
  }

  function pauseAudio() {
    audio.pause();
  }

  function setVolume(volume) {
    audio.volume = volume;
  }
</script>

在上面的示例中，通过 JavaScript 控制了音频文件的播放、暂停和音量设置操作，可以根据实际需求自定义音频控制功能。

总结

通过学习 HTML <audio> 标签的 src 属性，我们可以在网页中嵌入音频内容，并通过控制属性和 JavaScript 实现音频文件的播放控制。在实际开发中，可以根据需求选择合适的音频格式和添加自定义的控制功能，为用户提供更好的音频体验。