JavaScript hat einen schlechten Ruf, aber es hat seine St?rken. Das Beste daran ist vielleicht, dass es in einem Webbrowser funktioniert. Wenn Sie ein Programm in Rust oder Julia erstellen, muss der Benutzer dieses Programms diese Sprache auf seinem PC installiert haben. Selbst wenn Sie Docker verwenden, um Ihr Programm mit allem, was es zum Ausführen in diesem Container ben?tigt, zu containerisieren, muss der Benutzer dennoch Docker installiert haben, um es ausführen zu k?nnen.
Aber jeder hat einen Webbrowser. Und JavaScript kann für einfache Programme wie diesen kleinen Audioplayer überraschend gut funktionieren. Mit knapp 40 Zeilen Code und nur einer HTML-Datei und einer Javascript-Datei k?nnen Sie einen einfachen Player erstellen, der Audio in Ihrem Webbrowser abspielt. Es ist schlicht, aber elegant in seiner Schlichtheit. Es werden .mp3, .wav, .ogg und einige andere Formate abgespielt.
Hier ist der Code – speichern Sie diese erste Datei als 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>
Speichern Sie diese zweite Datei als script.js – legen Sie sie im selben Ordner/Verzeichnis wie die index.html-Datei ab
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();
}
Gehen Sie zum Ordner mit den beiden Dateien und klicken Sie auf die Datei index.html – Ihr Browser sollte den Player ?ffnen und Sie sehen das Feld zur Auswahl Ihrer Datei – w?hlen Sie eine .wav- oder .mp3-Datei von Ihrem PC.
Hinweis: Im index.html-Code gibt es eine Stelle zum ?ndern der Hintergrundfarbe des Player-Fensters – experimentieren Sie mit verschiedenen Hex-Farben.
Ben Santora – Oktober 2024
Das obige ist der detaillierte Inhalt vonEinfacher Audioplayer in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!