Simple Audio Player in JavaScript-JS Tutorial-php.cn

Simple Audio Player in JavaScript

Susan Sarandon

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

Original

493 people have browsed it

Simple Audio Player in JavaScript

JavaScript gets a bad rap, but it has its strengths. Maybe the best of them is that it works in a web browser. If you create a program in Rust or Julia, the user of that program needs that language installed on his or her PC. Even if you use Docker to containerize your program with everything it needs to run in that container, the user still needs to have Docker installed to run it.

But everyone has a web browser. And JavaScript can work surprisingly well for simple programs like this little audio player. With just under 40 lines of code and using just an html file and a javascript file, you can create a simple player that plays audio in your web browser. It's basic, but elegant in its simplicity. It will play .mp3, .wav, .ogg and a few other formats.

Here is the code - save this first file as 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>

Copy after login

Save this second file as script.js - put it in the same folder / directory as the index.html file

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

Copy after login

Go to the folder with the two files and click on the index.html file - your browser should open the player and you'll see the box for choosing your file - choose a .wav or .mp3 from your PC.

Note: There's a place in the index.html code for changing the background color of the player window - experiment with different hex colors.

Ben Santora - October 2024

The above is the detailed content of Simple Audio Player in JavaScript. For more information, please follow other related articles on the PHP Chinese website!