Audio currentSrc 属性

什么是 currentSrc 属性

currentSrc 属性是HTMLMediaElement 接口的一个属性，它返回当前媒体资源的 URL。对于<audio>和<video>元素来说，currentSrc 属性表示当前正在播放的音频或视频文件的 URL。

如何使用 currentSrc 属性

要获取当前音频的 URL，只需使用currentSrc属性即可。以下是一个简单的示例：

<audio id="myAudio" controls>
  <source src="audio.mp3" type="audio/mp3">
</audio>

<script>
  const audio = document.getElementById('myAudio');
  console.log(audio.currentSrc);
</script>

在上面的示例中，我们创建了一个<audio>元素，并设置了一个音频文件audio.mp3作为其源文件。然后通过document.getElementById方法获取到这个<audio>元素，并使用currentSrc属性打印出当前音频文件的 URL。

示例代码

以下是一个更为复杂的示例，展示了如何根据用户的操作来动态改变音频文件，并输出当前音频文件的 URL：

// www.javascriptcn.com code example
<audio id="myAudio" controls>
  <source src="audio1.mp3" type="audio/mp3">
  <source src="audio2.mp3" type="audio/mp3">
</audio>

<button onclick="changeAudio()">Change Audio</button>

<script>
  const audio = document.getElementById('myAudio');
  
  function changeAudio() {
    if (audio.currentSrc.includes('audio1.mp3')) {
      audio.src = 'audio2.mp3';
    } else {
      audio.src = 'audio1.mp3';
    }
    
    console.log(audio.currentSrc);
  }
</script>

在上面的示例中，我们创建了一个包含两个音频文件audio1.mp3和audio2.mp3的<audio>元素。当用户点击按钮时，会调用changeAudio函数来改变当前的音频文件。通过判断currentSrc属性中是否包含某个特定的音频文件 URL，来切换音频文件。

总结

通过本文的介绍，我们了解了currentSrc属性的基本用法和示例代码。在实际的项目中，可以根据具体需求来灵活运用这一属性，实现更加丰富和交互性强的音频播放功能。希望本文对你有所帮助，谢谢阅读！