HTML5 Audio stop function


147

Saya memutar klip audio kecil di klik setiap tautan di navigasi saya

Kode HTML:

<audio tabindex="0" id="beep-one" controls preload="auto" >
    <source src="audio/Output 1-2.mp3">
    <source src="audio/Output 1-2.ogg">
</audio>

Kode JS:

$('#links a').click(function(e) {
    e.preventDefault();
    var beepOne = $("#beep-one")[0];
    beepOne.play();
});

Sejauh ini berfungsi dengan baik.

Masalahnya adalah ketika klip suara sudah berjalan dan saya mengklik tautan apa pun tidak ada yang terjadi.

Saya mencoba menghentikan suara yang sudah diputar di klik tautan, tetapi tidak ada kejadian langsung untuk itu di Audio API HTML5

Saya mencoba mengikuti kode tetapi tidak berfungsi

$.each($('audio'), function () {
    $(this).stop();
});

Ada saran?

Jawaban:


350

Alih-alih stop()Anda bisa mencoba dengan:

sound.pause();
sound.currentTime = 0;

Ini harus memiliki efek yang diinginkan.


6
Ini tidak berfungsi di Chrome. Elemen audio terus memuat audio, yang tidak seharusnya terjadi.
Pieter

3
Di Chrome <audio>terus memuat juga dengan preloadatribut dipaksa untuk nonedan <source>src dilucuti.
Pioneer Skies

6
Ini berhasil, terima kasih. Di samping catatan saya ingin tahu mengapa w3c memutuskan untuk tidak memasukkan metode berhenti dalam spesifikasi.
Reahreic

25

pertama-tama Anda harus menetapkan id untuk elemen audio Anda

di js Anda:

var ply = document.getElementById('player');

var oldSrc = ply.src;// hanya untuk mengingat sumber yang lama

ply.src = "";// untuk menghentikan pemain kamu harus mengganti sumbernya dengan nol


4
Solusi terbaik untuk streaming audio
Hossein

1
well..that akan membuat permintaan jaringan lain untuk file sumber audio
Md. Arafat Al Mahmud

Audio tidak akan diputar sampai dimuat, dan ini akan menyebabkan penundaan yang tidak diinginkan dalam memutar audio.
Abhi

Sebuah solusi yang bagus untuk masalah ketika memainkan streaming seperti radio internet dan Firefox mengulangi potongan terakhir ketika jeda / putar diaktifkan. Terima kasih banyak.
namikiri

14

Inilah cara saya melakukan metode stop ():

Di suatu tempat dalam kode:

audioCh1: document.createElement("audio");

dan kemudian berhenti ():

this.audioCh1.pause()
this.audioCh1.src = 'data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEAVFYAAFRWAAABAAgAZGF0YQAAAAA=';

Dengan cara ini kami tidak menghasilkan permintaan tambahan, yang lama dibatalkan dan elemen audio kami dalam keadaan bersih (diuji di Chrome dan FF):>


10

Saya mengalami masalah yang sama. Berhenti harus menghentikan aliran dan onplay pergi untuk hidup jika itu adalah radio. Semua solusi yang saya lihat memiliki kelemahan :

  • player.currentTime = 0 terus mengunduh aliran.
  • player.src = ''meningkatkan erroracara

Solusi saya:

var player = document.getElementById('radio');
player.pause();
player.src = player.src;

Dan HTML

<audio src="http://radio-stream" id="radio" class="hidden" preload="none"></audio>

Ini berfungsi di Chrome dan Firefox. Namun, di Firefox ini menghasilkan kesalahan berikut (di konsol) [ Security Error: Content at https://localhost/url.html may not load data from blob:https://localhost/cac32534-78b0-4a62-8355-cc8f1e708d64.] Tampaknya tidak memiliki efek negatif karena kode terus dieksekusi setelah ini (tidak seperti Pengecualian yang tidak tertangkap).
BReddy

6

Metode ini berfungsi:

audio.pause();
audio.currentTime = 0;

Tetapi jika Anda tidak ingin harus menulis dua baris kode ini setiap kali Anda menghentikan audio Anda bisa melakukan salah satu dari dua hal ini. Yang kedua menurut saya adalah yang lebih tepat dan saya tidak yakin mengapa "para dewa standar javascript" belum membuat standar ini.

Metode pertama: buat fungsi dan berikan audio

function stopAudio(audio) {
    audio.pause();
    audio.currentTime = 0;
}

//then using it:
stopAudio(audio);

Metode kedua (disukai): memperpanjang kelas Audio:

Audio.prototype.stop = function() {
    this.pause();
    this.currentTime = 0;
};

Saya memiliki ini dalam file javascript yang saya sebut "AudioPlus.js" yang saya sertakan dalam html saya sebelum skrip apa pun yang akan berurusan dengan audio.

Kemudian Anda dapat memanggil fungsi berhenti pada objek audio:

audio.stop();

AKHIRNYA CHROME MASALAH DENGAN "canplaythrough":

Saya belum menguji ini di semua browser tetapi ini adalah masalah yang saya temui di Chrome. Jika Anda mencoba untuk mengatur currentTime pada audio yang memiliki pendengar acara "canplaythrough" yang terpasang padanya maka Anda akan memicu peristiwa itu lagi yang dapat menyebabkan hasil yang tidak diinginkan.

Jadi solusinya, mirip dengan semua kasus ketika Anda telah melampirkan pendengar acara yang Anda benar-benar ingin memastikan itu tidak dipicu lagi, adalah menghapus pendengar acara setelah panggilan pertama. Sesuatu seperti ini:

//note using jquery to attach the event. You can use plain javascript as well of course.
$(audio).on("canplaythrough", function() {
    $(this).off("canplaythrough");

    // rest of the code ...
});

BONUS:

Perhatikan bahwa Anda dapat menambahkan lebih banyak metode khusus ke kelas Audio (atau kelas javascript asli apa pun dalam hal ini).

Misalnya, jika Anda menginginkan metode "mulai ulang" yang memulai kembali audio, ia akan terlihat seperti:

Audio.prototype.restart= function() {
    this.pause();
    this.currentTime = 0;
    this.play();
};

function stopAudio(audio) { audio.pause(); this.audioStream.src = ""; } Melakukan hal ini pada akhirnya berhasil untuk saya dan menghapus ikon speaker di Browser Chrome yang muncul ketika audio diputar di halaman. diuji pada Versi Chrome 59.0.3071.109
lasec0203

Secara umum, saya tidak akan merekomendasikan memperpanjang prototipe seperti ini. Aplikasi audio-berat mungkin memiliki fungsi stop berbeda untuk kasus yang berbeda dan mengacaukan prototipe cenderung menyebabkan bug dalam imho jangka panjang
milesaron

5

Dari fungsi javascript saya sendiri untuk beralih Play / Pause - karena saya menangani aliran radio, saya ingin menghapus buffer sehingga pendengar tidak akhirnya tidak sinkron dengan stasiun radio.

function playStream() {

        var player = document.getElementById('player');

        (player.paused == true) ? toggle(0) : toggle(1);

}

function toggle(state) {

        var player = document.getElementById('player');
        var link = document.getElementById('radio-link');
        var src = "http://192.81.248.91:8159/;";

        switch(state) {
                case 0:
                        player.src = src;
                        player.load();
                        player.play();
                        link.innerHTML = 'Pause';
                        player_state = 1;
                        break;
                case 1:
                        player.pause();
                        player.currentTime = 0;
                        player.src = '';
                        link.innerHTML = 'Play';
                        player_state = 0;
                        break;
        }
}

Ternyata, hanya menghapus currentTime tidak memotongnya di bawah Chrome, perlu menghapus sumber juga dan memuatnya kembali. Semoga ini bisa membantu.


4

Sebagai catatan tambahan dan karena saya baru-baru ini menggunakan metode berhenti yang disediakan dalam jawaban yang diterima, menurut tautan ini:

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

dengan menyetel currentTime secara manual, orang dapat memunculkan event 'canplaythrough' pada elemen audio. Di tautan itu disebutkan Firefox, tapi saya mengalami peristiwa ini terjadi setelah menyetel currentTime secara manual di Chrome. Jadi, jika Anda memiliki perilaku terlampir pada acara ini, Anda mungkin berakhir di loop audio.


3

Kadang tidak berfungsi di chrome,

sound.pause();
sound.currentTime = 0;

ubah saja begitu,

sound.currentTime = 0;
sound.pause();

2

shamangeorge menulis:

dengan menyetel currentTime secara manual, orang dapat memunculkan event 'canplaythrough' pada elemen audio.

Ini memang yang akan terjadi, dan jeda juga akan memicu pauseacara, yang keduanya membuat teknik ini tidak cocok untuk digunakan sebagai metode "berhenti". Selain itu, pengaturan srcseperti yang disarankan oleh zaki akan membuat pemain mencoba memuat URL halaman saat ini sebagai file media (dan gagal) jika autoplaydiaktifkan - pengaturan srcke nulltidak diperbolehkan; itu akan selalu diperlakukan sebagai URL. Singkatnya menghancurkan objek pemain sepertinya tidak ada cara yang baik untuk menyediakan metode "berhenti", jadi saya sarankan hanya menjatuhkan tombol berhenti khusus dan memberikan jeda dan melompat kembali tombol sebagai gantinya - tombol berhenti tidak akan benar-benar menambah fungsionalitas apa pun .


1

Pendekatan ini adalah "brute force", tetapi ia bekerja dengan asumsi menggunakan jQuery "diperbolehkan". Kelilingi <audio></audio>tag "pemain" Anda dengan div (di sini dengan id "plHolder").

<div id="plHolder">
     <audio controls id="player">
     ...
     </audio>
<div>

Maka javascript ini akan berfungsi:

function stopAudio() {
    var savePlayer = $('#plHolder').html(); // Save player code
    $('#player').remove(); // Remove player from DOM
    $('#FlHolder').html(savePlayer); // Restore it
}

Hal yang sama dijelaskan oleh zaki dalam jawabannya di atas, tanpa menggunakan jquery.
Alok Jain

Saya tidak bereksperimen dengannya, tetapi saya tidak yakin bahwa metodenya akan berfungsi jika ada beberapa tag <source>.
user3062615

#FlHoldertampaknya salah ketik untuk#plHolder
Pioneer Skies

1
Sebagai balasan untuk @ alok-jain komentar: Saya kira jawaban ini sama sekali berbeda dari @zaki. Di sini kita membuat ulang elemen dalam DOM, di jawaban lain dia hanya "mengosongkan" srcatribut pemain.
Pioneer Skies

0

Saya percaya akan lebih baik untuk memeriksa apakah audio diputar dan mengatur ulang properti currentTime.

if (sound.currentTime !== 0 && (sound.currentTime > 0 && sound.currentTime < sound.duration) {
    sound.currentTime = 0;
}
sound.play();

0

bagi saya kode itu berfungsi dengan baik. (IE10 +)

var Wmp = document.getElementById("MediaPlayer");                
    Wmp.controls.stop();

<object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6"
    standby="Loading áudio..." style="width: 100%; height: 170px" id="MediaPlayer">...

Semoga bantuan ini.


0

Yang ingin saya lakukan adalah menghapus kontrol sepenuhnya menggunakan Angular2 lalu dimuat ulang ketika lagu berikutnya memiliki jalur audio:

<audio id="audioplayer" *ngIf="song?.audio_path">

Lalu ketika saya ingin menurunkannya dalam kode saya melakukan ini:

this.song = Object.assign({},this.song,{audio_path: null});

Saat lagu berikutnya ditetapkan, kontrol akan dibuat sepenuhnya dari awal:

this.song = this.songOnDeck;

0

Cara sederhana untuk mengatasi kesalahan ini adalah dengan menangkap kesalahan.

audioElement.play () mengembalikan janji, jadi kode berikut dengan .catch () harus cukup mengelola masalah ini:

function playSound(sound) {
  sfx.pause();
  sfx.currentTime = 0;
  sfx.src = sound;
  sfx.play().catch(e => e);
}

Catatan: Anda mungkin ingin mengganti fungsi panah dengan fungsi anonim untuk kompatibilitas mundur.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.