JavaScript 中的简单音频播放器-js教程-PHP中文网

JavaScript 中的简单音频播放器

Susan Sarandon

发布： 2024-10-23 06:23:01

原创

378 人浏览过

Simple Audio Player in JavaScript

JavaScript 名声不佳，但它也有自己的优势。也许其中最好的一点是它可以在网络浏览器中运行。如果您使用 Rust 或 Julia 创建程序，该程序的用户需要在他或她的 PC 上安装该语言。即使您使用 Docker 将程序及其在该容器中运行所需的所有内容容器化，用户仍然需要安装 Docker 才能运行它。

但是每个人都有一个网络浏览器。对于像这个小型音频播放器这样的简单程序，JavaScript 的工作效果出奇地好。只需不到 40 行代码，并且仅使用 html 文件和 javascript 文件，您就可以创建一个在 Web 浏览器中播放音频的简单播放器。它很基本，但简单又优雅。它可以播放 .mp3、.wav、.ogg 和其他一些格式。

这是代码 - 将第一个文件保存为index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Audio Player</title>
    <style>
        body {
            background-color: #a3e4d7; /* Change HEX color */
        }
    </style>
</head>
<body>
    <h1>Simple Audio Player</h1>
    <input type="file" id="fileInput" accept="audio/*">
    <audio id="audioPlayer" controls>
        Your browser does not support the audio element.
    </audio>
    <button onclick="playAudio()">Play</button>
    <button onclick="pauseAudio()">Pause</button>
    <script src="script.js"></script>
</body>
</html>

登录后复制

将第二个文件另存为 script.js - 将其放在与 index.html 文件相同的文件夹/目录中

const audioPlayer = document.getElementById('audioPlayer');
const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', function() {
    const file = this.files[0];
    const url = URL.createObjectURL(file);
    audioPlayer.src = url;
});

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

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

登录后复制

转到包含两个文件的文件夹，然后单击 index.html 文件 - 您的浏览器应打开播放器，您将看到用于选择文件的框 - 从您的电脑中选择 .wav 或 .mp3。

注意：index.html 代码中有一个地方可以更改播放器窗口的背景颜色 - 尝试不同的十六进制颜色。

本·桑托拉 - 2024 年 10 月

以上是JavaScript 中的简单音频播放器的详细内容。更多信息请关注PHP中文网其他相关文章！