JavaScript 名聲不佳，但它也有自己的優(yōu)勢。也許其中最好的一點是它可以在網絡瀏覽器中運行。如果您使用 Rust 或 Julia 創(chuàng)建程序，該程序的用戶需要在他或她的 PC 上安裝該語言。即使您使用 Docker 將程序及其在該容器中運行所需的所有內容容器化，用戶仍然需要安裝 Docker 才能運行它。
但是每個人都有一個網絡瀏覽器。對于像這個小型音頻播放器這樣的簡單程序，JavaScript 的工作效果出奇地好。只需不到 40 行代碼，并且僅使用 html 文件和 javascript 文件，您就可以創(chuàng)建一個在 Web 瀏覽器中播放音頻的簡單播放器。它很基本，但簡單又優(yōu)雅。它可以播放 .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中文網其他相關文章！