Lecteur audio simple en JavaScript-js tutoriel-php.cn

Lecteur audio simple en JavaScript

Susan Sarandon

Libérer： 2024-10-23 06:23:01

original

378 Les gens l'ont consulté

Simple Audio Player in JavaScript

JavaScript a une mauvaise réputation, mais il a ses atouts. Le meilleur d’entre eux est peut-être qu’il fonctionne dans un navigateur Web. Si vous créez un programme dans Rust ou Julia, l'utilisateur de ce programme a besoin que cette langue soit installée sur son PC. Même si vous utilisez Docker pour conteneuriser votre programme avec tout ce dont il a besoin pour s'exécuter dans ce conteneur, l'utilisateur doit toujours avoir Docker installé pour l'exécuter.

Mais tout le monde a un navigateur Web. Et JavaScript peut fonctionner étonnamment bien pour des programmes simples comme ce petit lecteur audio. Avec un peu moins de 40 lignes de code et en utilisant uniquement un fichier HTML et un fichier Javascript, vous pouvez créer un lecteur simple qui lit l'audio dans votre navigateur Web. C'est basique, mais élégant dans sa simplicité. Il lira les formats .mp3, .wav, .ogg et quelques autres formats.

Voici le code - enregistrez ce premier fichier sous 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>

Copier après la connexion

Enregistrez ce deuxième fichier sous script.js - placez-le dans le même dossier/répertoire que le fichier 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();
}

Copier après la connexion

Allez dans le dossier contenant les deux fichiers et cliquez sur le fichier index.html - votre navigateur devrait ouvrir le lecteur et vous verrez la case pour choisir votre fichier - choisissez un .wav ou un .mp3 depuis votre PC.

Remarque : il y a un endroit dans le code index.html pour changer la couleur d'arrière-plan de la fenêtre du lecteur - expérimentez avec différentes couleurs hexadécimales.

Ben Santora - Octobre 2024

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!