在 HTML 上播放音频源

在 HTML 页面上嵌入音频是一个非常常见的需求。HTML5 增加了 <audio> 元素，使得在网页中播放音频变得非常容易。本文将介绍如何在 HTML 中播放音频源。

采用基本的 HTML 音频播放器

最简单的方法是使用 HTML5 的 <audio> 元素。在这种情况下，你只需要提供音频文件的 URL。

<audio src="audio-file.mp3"><audio>

当用户单击上面的音频文件时，它将自动开始播放并且会有一个默认的控制面板显示。

自定义控制面板

如果你想要在 HTML 页面上创建一个自定义的音频控制器，你可以使用 JavaScript 和音频 API 来实现它。下面是一个基本的控制面板示例：

<audio id="myAudio">
    <source src="audio-file.mp3">
</audio>

<button onclick="playAudio()">&#9658; Play</button>
<button onclick="pauseAudio()">&#8718; Pause</button>
<button onclick="restartAudio()">&#8634; Restart</button>

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

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

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

    function restartAudio() {
        audio.currentTime = 0;
        audio.play();
    }
</script>

在上面的代码中，我们提供了自定义的控制面板按钮。playAudio() 函数启动音频播放，pauseAudio() 函数暂停音频播放，restartAudio() 函数将音频回到开始并播放它。

改变音频源

如果你想要切换音频源，那么你可以使用 JavaScript 来更改 <audio> 元素的 src 属性，然后加载新的音频源。

<audio id="myAudio">
    <source id="mp3Source" src="audio-file.mp3">
    <source id="oggSource" src="audio-file.ogg">
</audio>

<button onclick="changeAudioSource('mp3Source')">&#9658; Play MP3</button>
<button onclick="changeAudioSource('oggSource')">&#9658; Play OGG</button>

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

    function changeAudioSource(sourceID) {
        var source = document.getElementById(sourceID);
        audio.pause();
        audio.currentTime = 0;
        audio.load();
        audio.play();
    }
</script>

在上面的代码中，我们使用 changeAudioSource() 函数来更改音频源。这个函数取一个参数 sourceID ，它将用于匹配想要更改的音频源的元素的 ID。之后，函数停止正在播放的音频，将时间重置为 0，然后重新加载并播放新的音频源。

自定义音频进度条

默认情况下，<audio> 元素带有一个默认的音频控制面板，它包括一个进度条。如果你想要自定义进度条，你可以使用 JavaScript 和音频 API。

<audio id="myAudio">
    <source src="audio-file.mp3">
</audio>

<div id="progressBar">
    <div id="progress"></div>
</div>

<script>
    var audio = document.getElementById("myAudio");
    var progressBar = document.getElementById("progress");
    var progressBarWidth = progressBar.offsetWidth;

    audio.addEventListener("timeupdate", updateProgressBar, false);

    function updateProgressBar() {
        var progress = Math.floor((audio.currentTime / audio.duration) * progressBarWidth);
        progressBar.style.width = progress + "px";
    }
</script>

在上面的代码中，我们使用 addEventListener() 函数来添加 timeupdate 事件监听器。timeupdate 事件在音频时间已更改时触发。在这个事件监听器函数中，我们计算当前时间所占据的宽度，并将这个值分配给进度条。

以上就是如何在 HTML 上播放音频源的介绍，希望对你有所帮助。