Logo

菜单

发布于 2026-01-05 4 阅读
0

如何使用 HTML、JavaScript 和 CSS 创建一个简单的音频播放器？示例中使用的 HTML 标签如下：

如何使用 HTML、JavaScript 和 CSS 创建一个简单的音频播放器

我在示例中提供的用于创建 HTML 音频播放器的 HTML 标签

使用 HTML、JavaScript 和 CSS 构建一个基本的音频播放器

音频播放器是许多网站的常见功能，使用 HTML、JavaScript 和 CSS 创建一个简单的音频播放器也很容易。在本教程中，我们将指导您完成构建一个带有播放和暂停控制的基本音频播放器的过程。您也可以在文末下载此示例的源代码。

HTML结构

首先，我们来创建音频播放器的 HTML 结构。你需要一个<audio>用于播放音频的元素，还可以选择添加自定义控件。以下是音频播放器的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <title>Simple Audio Player</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="audio-player">
        <audio controls>
            <source src="your-audio-file.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
    </div>
    <script src="script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

这段代码中包含了一个<audio>带有“controls”属性的元素，它提供了标准的音频播放、暂停和音量控制功能。请将 `<path>` 替换"your-audio-file.mp3"为您的音频文件的实际路径。

使用 CSS 进行样式设置

现在，让我们添加一些基本样式，让音频播放器看起来更美观。创建一个 CSS 文件（style.css），并添加你的样式规则。以下是一个简单的示例：

/* You can style the audio player here */
.audio-player {
    width: 300px;
    margin: 20px;
}
Enter fullscreen mode Exit fullscreen mode

您可以自定义 CSS 以匹配您网站的设计偏好。在本例中，我们设置了固定宽度并添加了一些边距来创建间距。

使用 JavaScript 添加自定义控件

如果您想添加自定义控件，例如您自己的播放和暂停按钮，可以使用 JavaScript 来增强功能。创建一个 JavaScript 文件（script.js）并添加您的自定义控件：

const audio = document.querySelector("audio");

// Example: Add custom play/pause buttons
const playButton = document.getElementById("play-button");
const pauseButton = document.getElementById("pause-button");

playButton.addEventListener("click", () => {
    audio.play();
});

pauseButton.addEventListener("click", () => {
    audio.pause();
});
Enter fullscreen mode Exit fullscreen mode

在这段 JavaScript 代码中，我们选中一个<audio>元素，并为自定义的播放和暂停按钮创建事件监听器。点击播放按钮，音频开始播放；点击暂停按钮，音频暂停播放。

下载源代码

链接即将上线

您可以点击此处下载此示例的完整源代码：

下载简易音频播放器源代码

请注意，由于安全限制，直接在浏览器中打开 HTML 文件时无法播放音频，因此为了正确测试音频播放器，您可能需要通过 Web 服务器或本地开发环境来提供这些文件。

通过本教程和源代码，您将掌握创建适用于 Web 项目的基本音频播放器的基础。您可以根据自身需求和设计，添加更多功能和样式，进一步增强播放器的功能。您也可以尝试高级版本。

高级版

使用 HTML、JavaScript 和 CSS 创建一个高级音频播放器可以包含自定义进度条、音量控制和时间显示等附加功能。以下是一个高级音频播放器的示例：

HTML（index.html）：

<!DOCTYPE html>
<html>
<head>
    <title>Advanced Audio Player</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="audio-player">
        <audio id="audio" controls>
            <source src="your-audio-file.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
        <div class="controls">
            <button id="play-pause-button">Play</button>
            <input type="range" id="volume-control" min="0" max="1" step="0.01" value="1">
        </div>
        <div class="progress">
            <div class="progress-bar" id="progress-bar"></div>
        </div>
        <div id="current-time">0:00</div>
        <div id="total-time">0:00</div>
    </div>
    <script src="script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS（style.css）：

/* Customize the advanced audio player's appearance here */
.audio-player {
    width: 400px;
    margin: 20px;
}

.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.progress {
    height: 10px;
    background-color: #ccc;
    margin-top: 10px;
}

.progress-bar {
    width: 0;
    height: 100%;
    background-color: #4caf50;
}

#current-time, #total-time {
    margin-top: 10px;
}
Enter fullscreen mode Exit fullscreen mode

JavaScript（script.js）：

const audio = document.getElementById("audio");
const playPauseButton = document.getElementById("play-pause-button");
const volumeControl = document.getElementById("volume-control");
const progressBar = document.getElementById("progress-bar");
const currentTimeDisplay = document.getElementById("current-time");
const totalTimeDisplay = document.getElementById("total-time");

let isPlaying = false;

playPauseButton.addEventListener("click", () => {
    if (isPlaying) {
        audio.pause();
        playPauseButton.textContent = "Play";
    } else {
        audio.play();
        playPauseButton.textContent = "Pause";
    }
    isPlaying = !isPlaying;
});

volumeControl.addEventListener("input", () => {
    audio.volume = volumeControl.value;
});

audio.addEventListener("timeupdate", () => {
    const currentTime = audio.currentTime;
    const duration = audio.duration;

    const currentMinutes = Math.floor(currentTime / 60);
    const currentSeconds = Math.floor(currentTime % 60);
    const totalMinutes = Math.floor(duration / 60);
    const totalSeconds = Math.floor(duration % 60);

    currentTimeDisplay.textContent = `${currentMinutes}:${currentSeconds < 10 ? '0' : ''}${currentSeconds}`;
    totalTimeDisplay.textContent = `${totalMinutes}:${totalSeconds < 10 ? '0' : ''}${totalSeconds}`;

    const progress = (currentTime / duration) * 100;
    progressBar.style.width = `${progress}%`;
});
Enter fullscreen mode Exit fullscreen mode

这款高级音频播放器包含自定义播放/暂停按钮、音量控制滑块、进度条，并显示当前时间和总时间。它为用户提供更具互动性和信息量的音频播放体验。请务必将 `<path>` 替换"your-audio-file.mp3"为您的实际音频文件路径。您还可以进一步自定义样式和功能，以满足项目的特定需求。

我在示例中提供的用于创建 HTML 音频播放器的 HTML 标签

在我提供的 HTML 音频播放器示例中，使用了多个 HTML 标签。以下是该示例中使用的关键 HTML 标签列表：

  1. <html>：包含整个 HTML 文档的根元素。

  2. <head>：包含有关文档的元信息，例如标题和指向外部资源（如样式表和脚本）的链接。

  3. <title>: 设置网页标题，该标题将显示在浏览器的标题栏或标签页中。

  4. <link>：指定要在文档中使用的外部资源，例如样式表。

  5. <body>：包含用户可见的网页内容。

  6. <div>：一个块级容器，通常用于对 HTML 元素进行分组和设置样式。

  7. <audio>：一个用于嵌入音频内容的 HTML5 元素，提供原生音频控件并支持各种音频格式。

  8. <source>：用于<audio>元素内，以指定浏览器可选择的不同音频源或格式。

  9. <button>创建一个可点击的按钮，该按钮可以触发 JavaScript 操作。

  10. <input>：表示输入控件，例如音量控制滑块的范围输入。

这些 HTML 标签组合在一起，构成了网页和音频播放器的结构，以及用于交互和显示的控件和元素。

文章来源：https://dev.to/ctrlcoding/how-to-create-a-simple-audio-player-in-html-javascript-and-css-4l2e
面向开发者的 10 份新闻简报简介...
使用 LlamaIndex、Com...