Putar file audio menggunakan jQuery ketika tombol diklik

Question 1

Saya mencoba memutar file audio ketika saya mengklik tombolnya, tetapi tidak berfungsi, kode html saya adalah:

<html>    
    <body>
        <div id="container">
            <button id="play">
                Play Music
            </button>
        </div>
    </body>
</html>

JavaScript saya adalah:

$('document').ready(function () {
    $('#play').click(function () {
        var audio = {};
        audio["walk"] = new Audio();
        audio["walk"].src = "http://www.rangde.org/static/bell-ring-01.mp3"
        audio["walk"].addEventListener('load', function () {
            audio["walk"].play();
        });
    });
});

Saya telah membuat Biola untuk itu juga.

Question 2

Pendekatan yang mana?

Anda dapat memutar audio dengan <audio>tag atau <object>atau <embed>. Lazy loading (memuat saat Anda membutuhkannya) suara adalah pendekatan terbaik jika ukurannya kecil. Anda dapat membuat elemen audio secara dinamis, saat dimuat Anda dapat memulainya .play()dan menjedanya .pause().

Hal-hal yang kami gunakan

Kami akan menggunakan canplayevent untuk mendeteksi file kami siap untuk dimainkan.

Tidak ada .stop()fungsi untuk elemen audio. Kami hanya dapat menghentikannya. Dan ketika kita ingin memulai dari awal file audio kita ubah .currentTime. Kami akan menggunakan baris ini dalam contoh kami audioElement.currentTime = 0;. Untuk mencapai .stop()fungsi, pertama kita pause file kemudian mengatur ulang waktunya.

Kami mungkin ingin mengetahui panjang file audio dan waktu pemutaran saat ini. Kita sudah pelajari di .currentTimeatas, untuk mempelajari panjangnya kita gunakan .duration.

Panduan Contoh

Saat dokumen siap kami membuat elemen audio secara dinamis
Kami mengatur sumbernya dengan audio yang ingin kami putar.
Kami menggunakan acara 'berakhir' untuk memulai file lagi.

Jika currentTime sama dengan durasinya, file audio akan berhenti diputar. Kapan pun Anda menggunakannya play(), itu akan dimulai dari awal.

Kami menggunakan timeupdateacara untuk memperbarui waktu saat ini setiap kali audio .currentTimeberubah.
Kami menggunakan canplayacara untuk memperbarui informasi ketika file siap diputar.
Kami membuat tombol untuk memutar, menjeda, memulai ulang.

$(document).ready(function() {
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', 'http://www.soundjay.com/misc/sounds/bell-ringing-01.mp3');
    
    audioElement.addEventListener('ended', function() {
        this.play();
    }, false);
    
    audioElement.addEventListener("canplay",function(){
        $("#length").text("Duration:" + audioElement.duration + " seconds");
        $("#source").text("Source:" + audioElement.src);
        $("#status").text("Status: Ready to play").css("color","green");
    });
    
    audioElement.addEventListener("timeupdate",function(){
        $("#currentTime").text("Current second:" + audioElement.currentTime);
    });
    
    $('#play').click(function() {
        audioElement.play();
        $("#status").text("Status: Playing");
    });
    
    $('#pause').click(function() {
        audioElement.pause();
        $("#status").text("Status: Paused");
    });
    
    $('#restart').click(function() {
        audioElement.currentTime = 0;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <h2>Sound Information</h2>
    <div id="length">Duration:</div>
    <div id="source">Source:</div>
    <div id="status" style="color:red;">Status: Loading</div>
    <hr>
    <h2>Control Buttons</h2>
    <button id="play">Play</button>
    <button id="pause">Pause</button>
    <button id="restart">Restart</button>
    <hr>
    <h2>Playing Information</h2>
    <div id="currentTime">0</div>
</body>

Luaskan cuplikan

Question 3

$("#myAudioElement")[0].play();

Itu tidak bekerja dengan $("#myAudioElement").play()seperti yang Anda harapkan. Alasan resminya adalah menggabungkannya ke jQuery akan menambahkan play()metode ke setiap elemen, yang akan menyebabkan overhead yang tidak perlu. Jadi, Anda harus merujuknya dengan posisinya dalam larik elemen DOM yang Anda ambil $("#myAudioElement"), alias 0.

Kutipan ini berasal dari bug yang dikirimkan tentang itu , yang ditutup sebagai "feature / wontfix":

Untuk melakukan itu kita perlu menambahkan nama metode jQuery untuk setiap nama metode elemen DOM. Dan tentu saja metode itu tidak akan melakukan apa pun untuk elemen non-media sehingga tampaknya tidak sepadan dengan byte tambahan yang diperlukan.

Question 4

Untuk orang lain yang mengikuti, saya hanya mengambil jawaban Ahmet dan memperbarui jsfiddle penanya asli di sini , menggantikan:

audio.mp3

untuk

http://www.uscis.gov/files/nativedocuments/Track%2093.mp3

menghubungkan dalam mp3 yang tersedia secara gratis dari web. Terima kasih telah membagikan solusi mudahnya!

Question 5

Saya di sini memiliki solusi yang bagus dan serbaguna dengan fallback:

<script type="text/javascript">
    var audiotypes={
        "mp3": "audio/mpeg",
        "mp4": "audio/mp4",
        "ogg": "audio/ogg",
        "wav": "audio/wav"
    }

    function ss_soundbits(sound){
        var audio_element = document.createElement('audio')
        if (audio_element.canPlayType){
            for (var i=0; i<arguments.length; i++){
                var source_element = document.createElement('source')
                source_element.setAttribute('src', arguments[i])
                if (arguments[i].match(/\.(\w+)$/i))
                    source_element.setAttribute('type', audiotypes[RegExp.$1])
                audio_element.appendChild(source_element)
            }
            audio_element.load()
            audio_element.playclip=function(){
                audio_element.pause()
                audio_element.currentTime=0
                audio_element.play()
            }
            return audio_element
        }
    }
</script>

Setelah itu Anda dapat menginisialisasi audio sebanyak yang Anda suka:

<script type="text/javascript" >
    var clicksound  = ss_soundbits('your/path/to/click.ogg', "your/path/to/click.mp3");
    var plopsound  = ss_soundbits('your/path/to/plopp.ogg', "your/path/to/plopp.mp3");
</script>

Sekarang Anda dapat mencapai elemen audio yang diinisialisasi di mana pun Anda suka dengan panggilan acara sederhana seperti

onclick="clicksound.playclip()"

onmouseover="plopsound.playclip()"

Question 6

Demonstrasi JSFiddle

Inilah yang saya gunakan dengan JQuery:

$('.button').on('click', function () { 
    var obj = document.createElement("audio");
        obj.src = "linktoyourfile.wav"; 
        obj.play(); 
});

Question 7

Bagaimana dengan:

$('#play').click(function() {
  const audio = new Audio("https://freesound.org/data/previews/501/501690_1661766-lq.mp3");
  audio.play();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Luaskan cuplikan

Answer 1

Saya mencoba memutar file audio ketika saya mengklik tombolnya, tetapi tidak berfungsi, kode html saya adalah:

<html>    
    <body>
        <div id="container">
            <button id="play">
                Play Music
            </button>
        </div>
    </body>
</html>

JavaScript saya adalah:

$('document').ready(function () {
    $('#play').click(function () {
        var audio = {};
        audio["walk"] = new Audio();
        audio["walk"].src = "http://www.rangde.org/static/bell-ring-01.mp3"
        audio["walk"].addEventListener('load', function () {
            audio["walk"].play();
        });
    });
});

Saya telah membuat Biola untuk itu juga.

Answer 2

Apakah Anda menggunakan audio HTML5

OnesimusUnbound

Answer 3

Pendekatan yang mana?

Anda dapat memutar audio dengan <audio>tag atau <object>atau <embed>. Lazy loading (memuat saat Anda membutuhkannya) suara adalah pendekatan terbaik jika ukurannya kecil. Anda dapat membuat elemen audio secara dinamis, saat dimuat Anda dapat memulainya .play()dan menjedanya .pause().

Hal-hal yang kami gunakan

Kami akan menggunakan canplayevent untuk mendeteksi file kami siap untuk dimainkan.

Tidak ada .stop()fungsi untuk elemen audio. Kami hanya dapat menghentikannya. Dan ketika kita ingin memulai dari awal file audio kita ubah .currentTime. Kami akan menggunakan baris ini dalam contoh kami audioElement.currentTime = 0;. Untuk mencapai .stop()fungsi, pertama kita pause file kemudian mengatur ulang waktunya.

Kami mungkin ingin mengetahui panjang file audio dan waktu pemutaran saat ini. Kita sudah pelajari di .currentTimeatas, untuk mempelajari panjangnya kita gunakan .duration.

Panduan Contoh

Saat dokumen siap kami membuat elemen audio secara dinamis
Kami mengatur sumbernya dengan audio yang ingin kami putar.
Kami menggunakan acara 'berakhir' untuk memulai file lagi.

Jika currentTime sama dengan durasinya, file audio akan berhenti diputar. Kapan pun Anda menggunakannya play(), itu akan dimulai dari awal.

Kami menggunakan timeupdateacara untuk memperbarui waktu saat ini setiap kali audio .currentTimeberubah.
Kami menggunakan canplayacara untuk memperbarui informasi ketika file siap diputar.
Kami membuat tombol untuk memutar, menjeda, memulai ulang.

$(document).ready(function() {
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', 'http://www.soundjay.com/misc/sounds/bell-ringing-01.mp3');
    
    audioElement.addEventListener('ended', function() {
        this.play();
    }, false);
    
    audioElement.addEventListener("canplay",function(){
        $("#length").text("Duration:" + audioElement.duration + " seconds");
        $("#source").text("Source:" + audioElement.src);
        $("#status").text("Status: Ready to play").css("color","green");
    });
    
    audioElement.addEventListener("timeupdate",function(){
        $("#currentTime").text("Current second:" + audioElement.currentTime);
    });
    
    $('#play').click(function() {
        audioElement.play();
        $("#status").text("Status: Playing");
    });
    
    $('#pause').click(function() {
        audioElement.pause();
        $("#status").text("Status: Paused");
    });
    
    $('#restart').click(function() {
        audioElement.currentTime = 0;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <h2>Sound Information</h2>
    <div id="length">Duration:</div>
    <div id="source">Source:</div>
    <div id="status" style="color:red;">Status: Loading</div>
    <hr>
    <h2>Control Buttons</h2>
    <button id="play">Play</button>
    <button id="pause">Pause</button>
    <button id="restart">Restart</button>
    <hr>
    <h2>Playing Information</h2>
    <div id="currentTime">0</div>
</body>

Luaskan cuplikan

Answer 4

1

Dan Anda harus meletakkan skrip ini di akhir <body> *

tbleckert

Answer 5

berikut adalah markup yang sebagian besar berfungsi di semua browser .

shaijut

Answer 6

Sangat bagus meskipun OP secara eksplisit mengatakan dia ingin melakukan ini di jQuery. Dalam contoh Anda, Anda menggunakan javascript murni untuk manipulasi dom dan event listener.

Jacques

Answer 7

Saya memiliki masalah dengan cuplikan ini: bagaimana saya dapat menghentikan audio secara otomatis saat mp3 diakhiri? sekarang, dengan audio saya yang sangat pendek, ini terus terdengar dalam lingkaran

Domenico Monaco

Answer 8

1

@DomenicoMonaco Hapus saja endedacara yang memutar audio dari awal.

Ahmet Can Güven

Answer 9

$("#myAudioElement")[0].play();

Itu tidak bekerja dengan $("#myAudioElement").play()seperti yang Anda harapkan. Alasan resminya adalah menggabungkannya ke jQuery akan menambahkan play()metode ke setiap elemen, yang akan menyebabkan overhead yang tidak perlu. Jadi, Anda harus merujuknya dengan posisinya dalam larik elemen DOM yang Anda ambil $("#myAudioElement"), alias 0.

Kutipan ini berasal dari bug yang dikirimkan tentang itu , yang ditutup sebagai "feature / wontfix":

Untuk melakukan itu kita perlu menambahkan nama metode jQuery untuk setiap nama metode elemen DOM. Dan tentu saja metode itu tidak akan melakukan apa pun untuk elemen non-media sehingga tampaknya tidak sepadan dengan byte tambahan yang diperlukan.

Answer 10

3

Terima kasih! Persis apa yang saya cari!

utdrmac

Answer 11

21

Untuk orang lain yang mengikuti, saya hanya mengambil jawaban Ahmet dan memperbarui jsfiddle penanya asli di sini , menggantikan:

audio.mp3

untuk

http://www.uscis.gov/files/nativedocuments/Track%2093.mp3

menghubungkan dalam mp3 yang tersedia secara gratis dari web. Terima kasih telah membagikan solusi mudahnya!

texas-bronius
sumber

Bekerja pada Firefox 42 di Ubuntu

Bojan Kogoj

1

Peristiwa pemuatan tidak diaktifkan di jsfiiddle ini di Chrome. Itu hanya diputar karena atribut putar otomatis.

Tom

Answer 12

Bekerja pada Firefox 42 di Ubuntu

Bojan Kogoj

Answer 13

1

Peristiwa pemuatan tidak diaktifkan di jsfiiddle ini di Chrome. Itu hanya diputar karena atribut putar otomatis.

Tom

Answer 14

Saya di sini memiliki solusi yang bagus dan serbaguna dengan fallback:

<script type="text/javascript">
    var audiotypes={
        "mp3": "audio/mpeg",
        "mp4": "audio/mp4",
        "ogg": "audio/ogg",
        "wav": "audio/wav"
    }

    function ss_soundbits(sound){
        var audio_element = document.createElement('audio')
        if (audio_element.canPlayType){
            for (var i=0; i<arguments.length; i++){
                var source_element = document.createElement('source')
                source_element.setAttribute('src', arguments[i])
                if (arguments[i].match(/\.(\w+)$/i))
                    source_element.setAttribute('type', audiotypes[RegExp.$1])
                audio_element.appendChild(source_element)
            }
            audio_element.load()
            audio_element.playclip=function(){
                audio_element.pause()
                audio_element.currentTime=0
                audio_element.play()
            }
            return audio_element
        }
    }
</script>

Setelah itu Anda dapat menginisialisasi audio sebanyak yang Anda suka:

<script type="text/javascript" >
    var clicksound  = ss_soundbits('your/path/to/click.ogg', "your/path/to/click.mp3");
    var plopsound  = ss_soundbits('your/path/to/plopp.ogg', "your/path/to/plopp.mp3");
</script>

Sekarang Anda dapat mencapai elemen audio yang diinisialisasi di mana pun Anda suka dengan panggilan acara sederhana seperti

onclick="clicksound.playclip()"

onmouseover="plopsound.playclip()"

Answer 15

Demonstrasi JSFiddle

Inilah yang saya gunakan dengan JQuery:

$('.button').on('click', function () { 
    var obj = document.createElement("audio");
        obj.src = "linktoyourfile.wav"; 
        obj.play(); 
});

Answer 16

4

Bagaimana dengan:

$('#play').click(function() {
  const audio = new Audio("https://freesound.org/data/previews/501/501690_1661766-lq.mp3");
  audio.play();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Luaskan cuplikan

Luis David
sumber

itulah cara paling sederhana, berfungsi seperti pesona dan Anda dapat mengaktifkan tindakan yang sama ini menggunakan acara vanilla js jika Anda mau.

Andrea Mauro

Answer 17

itulah cara paling sederhana, berfungsi seperti pesona dan Anda dapat mengaktifkan tindakan yang sama ini menggunakan acara vanilla js jika Anda mau.

Andrea Mauro

Putar file audio menggunakan jQuery ketika tombol diklik

Jawaban:

Pendekatan yang mana?

Hal-hal yang kami gunakan

Panduan Contoh