HTML5 Audio stop function

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?

Alih-alih stop()Anda bisa mencoba dengan:

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

Ini harus memiliki efek yang diinginkan.

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

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

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>

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

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.

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.

Kadang tidak berfungsi di chrome,

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

ubah saja begitu,

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

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 .

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
}

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

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.

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;

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.