Pemain Audio Mudah dalam JavaScript

JavaScript mendapat rap yang buruk, tetapi ia mempunyai kekuatannya. Mungkin yang terbaik daripada mereka ialah ia berfungsi dalam pelayar web. Jika anda mencipta program dalam Rust atau Julia, pengguna program itu memerlukan bahasa itu dipasang pada PCnya. Walaupun anda menggunakan Docker untuk menyimpan program anda dengan semua yang diperlukan untuk dijalankan dalam bekas itu, pengguna masih perlu memasang Docker untuk menjalankannya.

Tetapi semua orang mempunyai pelayar web. Dan JavaScript boleh berfungsi dengan baik untuk program mudah seperti pemain audio kecil ini. Dengan hanya di bawah 40 baris kod dan hanya menggunakan fail html dan fail javascript, anda boleh mencipta pemain mudah yang memainkan audio dalam penyemak imbas web anda. Ia asas, tetapi elegan dalam kesederhanaannya. Ia akan memainkan .mp3, .wav, .ogg dan beberapa format lain.

Berikut ialah kod - simpan fail pertama ini sebagai index.html:

    <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>


    <h1 id="Simple-Audio-Player">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>

Simpan fail kedua ini sebagai script.js - letakkan dalam folder / direktori yang sama dengan fail 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();
}

Pergi ke folder dengan dua fail dan klik pada fail index.html - penyemak imbas anda harus membuka pemain dan anda akan melihat kotak untuk memilih fail anda - pilih .wav atau .mp3 daripada PC anda.

Nota: Terdapat tempat dalam kod index.html untuk menukar warna latar belakang tetingkap pemain - bereksperimen dengan warna heks yang berbeza.

Ben Santora - Oktober 2024

Atas ialah kandungan terperinci Pemain Audio Mudah dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!