Maison > Article > interface Web > Lecteur audio simple en JavaScript

Lecteur audio simple en JavaScript

Susan Sarandonoriginal: 2024-10-23 06:23:01382parcourir

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>

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

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!

JavaScript julia rust html if for Directory using JS this background docker everything

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Débogage Java : un guide completArticle suivant：Débogage Java : un guide complet

Articles Liés

Voir plus