cari

Rumah  >  Artikel  >  hujung hadapan web  >  Pemain Audio Mudah dalam JavaScript

Pemain Audio Mudah dalam JavaScript

Susan Sarandon
Susan Sarandonasal
2024-10-23 06:23:01473semak imbas

Simple Audio Player in 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:

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

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!

JavaScript julia rust html if for Directory using JS this background docker everything
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Penyahpepijatan Java: Panduan KomprehensifArtikel seterusnya：Penyahpepijatan Java: Panduan Komprehensif

Artikel berkaitan

Lihat lagi