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

首页

web前端

js教程

JavaScript 中的简单音频播放器

Oct 23, 2024 am 06:23 AM

Simple Audio Player in JavaScript

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

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

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

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

登录后复制

将第二个文件另存为 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中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn