JavaScript は評(píng)判が悪いですが、長(zhǎng)所もあります。おそらく最も優(yōu)れているのは、Web ブラウザーで動(dòng)作することです。 Rust または Julia でプログラムを作成する場(chǎng)合、そのプログラムのユーザーはその言語(yǔ)を自分の PC にインストールする必要があります。 Docker を使用して、そのコンテナ內(nèi)で実行するために必要なものすべてを備えたプログラムをコンテナ化した場(chǎng)合でも、ユーザーはそれを?qū)g行するために Docker をインストールする必要があります。
しかし、誰(shuí)もが Web ブラウザを持っています。そして、JavaScript は、この小さなオーディオ プレーヤーのような単純なプログラムでは驚くほどうまく機(jī)能します。 40 行弱のコードと HTML ファイルと JavaScript ファイルだけを使用して、Web ブラウザでオーディオを再生する?yún)g純なプレーヤーを作成できます。ベーシックですが、シンプルさの中にエレガントさが漂います。 .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>
この 2 番目のファイルを 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();
}
2 つのファイルが含まれるフォルダーに移動(dòng)し、index.html ファイルをクリックします。ブラウザーでプレーヤーが開(kāi)き、ファイルを選択するボックスが表示されます。PC から .wav または .mp3 を選択します。
注:index.html コードには、プレーヤー ウィンドウの背景色を変更するための場(chǎng)所があります。さまざまな 16 進(jìn)數(shù)の色を試してください。
ベン?サントラ - 2024 年 10 月
以上がJavaScript でのシンプルなオーディオ プレーヤーの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。