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中文网其他相关文章！
