ホームページ > 記事 > ウェブフロントエンド > JavaScript でのシンプルなオーディオ プレーヤー
JavaScript でのシンプルなオーディオ プレーヤー
- Susan Sarandonオリジナル
- 2024-10-23 06:23:01378ブラウズ
JavaScript は評判が悪いですが、長所もあります。おそらく最も優れているのは、Web ブラウザーで動作することです。 Rust または Julia でプログラムを作成する場合、そのプログラムのユーザーはその言語を自分の PC にインストールする必要があります。 Docker を使用して、そのコンテナ内で実行するために必要なものすべてを備えたプログラムをコンテナ化した場合でも、ユーザーはそれを実行するために Docker をインストールする必要があります。
しかし、誰もが Web ブラウザを持っています。そして、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>
この 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 つのファイルが含まれるフォルダーに移動し、index.html ファイルをクリックします。ブラウザーでプレーヤーが開き、ファイルを選択するボックスが表示されます。PC から .wav または .mp3 を選択します。
注:index.html コードには、プレーヤー ウィンドウの背景色を変更するための場所があります。さまざまな 16 進数の色を試してください。
ベン・サントラ - 2024 年 10 月
以上がJavaScript でのシンプルなオーディオ プレーヤーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。