Einfacher Audioplayer in JavaScript-js-Tutorial-php.cn

Einfacher Audioplayer in JavaScript

Susan Sarandon

Freigeben： 2024-10-23 06:23:01

Original

460 Leute haben es durchsucht

Simple Audio Player in JavaScript

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>

Nach dem Login kopieren

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();
}

Nach dem Login kopieren

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!