HTML5 Ses durdurma işlevi

Question 1

Gezinmemdeki her bir bağlantıya tıklandığında küçük bir ses klibi oynatıyorum

HTML Kodu:

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

JS kodu:

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

Şimdiye kadar iyi çalışıyor.

Sorun, bir ses klibi zaten çalışıyorsa ve herhangi bir bağlantıya tıkladığımda hiçbir şey olmuyor.

Bağlantı tıklandığında zaten çalan sesi durdurmaya çalıştım, ancak HTML5'in Ses API'sinde bunun için doğrudan bir olay yok

Aşağıdaki kodu denedim ama çalışmıyor

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

Herhangi bir öneriniz lütfen?

Question 2

stop()Sizin yerine deneyebilirsiniz:

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

Bunun istenen etkiye sahip olması gerekir.

Question 3

önce ses öğeniz için bir kimlik belirlemelisiniz

js'nizde:

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

var oldSrc = ply.src;// sadece eski kaynağı hatırlamak için

ply.src = "";// oynatıcıyı durdurmak için kaynağı hiçbir şeyle değiştirmelisiniz

Question 4

İşte stop () yöntemini yapma yöntemim:

Kodda bir yerde:

audioCh1: document.createElement("audio");

ve sonra stop ():

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

Bu şekilde ek talep üretmiyoruz, eskisi iptal ediliyor ve ses öğemiz temiz durumda (Chrome ve FF'de test edildi):>

Question 5

Ben de aynı sorunu yaşıyordum. Bir durak, yayını durdurmalı ve bir radyo ise canlı yayına geçmelidir . Gördüğüm tüm çözümlerin bir dezavantajı vardı :

player.currentTime = 0 akışı indirmeye devam ediyor.
player.src = ''errorolay yükseltmek

Çözümüm:

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

Ve HTML

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

Question 6

Bu yöntem işe yarar:

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

Ancak, bir sesi her durdurduğunuzda bu iki satırlık kodu yazmak zorunda kalmak istemiyorsanız, iki şeyden birini yapabilirsiniz. Bence ikincisi daha uygun olanı ve "javascript standartlarının tanrılarının" bu standardı neden oluşturmadıklarından emin değilim.

İlk yöntem: bir işlev oluşturun ve sesi iletin

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

//then using it:
stopAudio(audio);

İkinci yöntem (tercih edilen): Audio sınıfını genişletin:

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

Bunu, sesle ilgilenecek herhangi bir komut dizisinden önce html'ime dahil ettiğim "AudioPlus.js" adlı bir javascript dosyasında buldum.

Ardından, ses nesnelerinde durdurma işlevini çağırabilirsiniz:

audio.stop();

"Canplaythrough" İLE SON KROM SORUNU:

Bunu tüm tarayıcılarda test etmedim ama bu Chrome'da karşılaştığım bir sorun. Bir "canplaythrough" olay dinleyicisi eklenmiş bir seste currentTime'ı ayarlamaya çalışırsanız, o olayı tekrar tetikleyerek istenmeyen sonuçlara yol açabilirsiniz.

Dolayısıyla, bir olay dinleyicisini eklediğinizde tekrar tetiklenmediğinden emin olmak istediğiniz tüm durumlara benzer çözüm, ilk çağrıdan sonra olay dinleyicisini kaldırmaktır. Bunun gibi bir şey:

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

Audio sınıfına (veya bu konuyla ilgili herhangi bir yerel javascript sınıfına) daha da fazla özel yöntem ekleyebileceğinizi unutmayın.

Örneğin, sesi yeniden başlatan bir "yeniden başlatma" yöntemi istiyorsanız, aşağıdaki gibi görünebilir:

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

Question 7

Kendi javascript işlevimden Oynat / Duraklat'ı değiştirmek için - bir radyo akışını işlediğim için, arabelleği temizlemesini istedim, böylece dinleyici radyo istasyonuyla eşzamanlı hale gelmez.

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

Görünüşe göre, sadece currentTime'ı temizlemek onu Chrome altında kesmiyor, kaynağı da temizlemek ve tekrar yüklemek gerekiyor. Umarım bu yardımcı olur.

Question 8

Bir yan not olarak ve bu bağlantıya göre, kabul edilen cevapta verilen durdurma yöntemini yakın zamanda kullandığım için:

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

currentTime'ı manuel olarak ayarlayarak ses öğesinde 'canplaythrough' olayını tetikleyebilirsiniz. Bağlantıda Firefox'tan bahsediyor, ancak bu etkinlikle Chrome'da currentTime'ı manuel olarak ayarladıktan sonra tetiklendiğinde karşılaştım. Bu nedenle, bu olaya bağlı bir davranışınız varsa, bir ses döngüsüne girebilirsiniz.

Question 9

Bazen kromda çalışmıyor,

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

sadece böyle değiştir

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

Question 10

shamangeorge şunu yazdı:

currentTime'ı manuel olarak ayarlayarak ses öğesinde 'canplaythrough' olayını tetikleyebilirsiniz.

Gerçekte olacak olan budur ve duraklama da pauseolayı tetikleyecektir , her ikisi de bu tekniği bir "durdurma" yöntemi olarak kullanım için uygunsuz kılar. Üstelik ayarı srceğer bir medya dosyası olarak geçerli sayfanın URL'sini yüklemek (ve başarısız) için oyuncu denemek yapacak Zaki önerdiği gibi autoplayetkindir - ayar srciçin nullizin verilmez; her zaman bir URL olarak ele alınacaktır. Oynatıcı nesnesini yok etmenin yanı sıra, bir "durdur" yöntemi sağlamanın iyi bir yolu yok gibi görünüyor, bu nedenle, yalnızca özel durdurma düğmesini bırakıp bunun yerine duraklatma ve geri atlama düğmelerini sağlamayı öneririm - bir durdur düğmesi gerçekten herhangi bir işlevsellik eklemeyecektir .

Question 11

Bu yaklaşım "kaba kuvvet" dir, ancak jQuery kullanımına "izin verildiğini" varsayarak çalışır. "Player" <audio></audio>etiketlerinizi bir div ile çevreleyin (burada "plHolder" kimliğiyle).

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

O zaman bu javascript çalışmalıdır:

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

Question 12

Sesin çalma durumunu kontrol etmenin ve currentTime özelliğini sıfırlamanın iyi olacağına inanıyorum.

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

Question 13

benim için bu kod iyi çalışıyor. (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">...

Umarım bu yardımcı olur.

Question 14

Yapmaktan hoşlandığım şey, Angular2'yi kullanarak kontrolü tamamen kaldırmak ve ardından sonraki şarkının bir ses yolu olduğunda yeniden yüklenmek:

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

Sonra onu kodda boşaltmak istediğimde şunu yapıyorum:

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

Bir sonraki şarkı atandığında, kontrol tamamen sıfırdan yeniden oluşturulur:

this.song = this.songOnDeck;

Question 15

Bu hatayı aşmanın basit yolu, hatayı yakalamaktır.

audioElement.play () bir söz verir, bu nedenle .catch () içeren aşağıdaki kod bu sorunu yönetmek için yeterli olmalıdır:

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

Snippet'i genişlet

Not: Ok işlevini, geriye dönük uyumluluk için anonim bir işlevle değiştirmek isteyebilirsiniz.

Question 16

IE 11'de birleşik varyant kullandım:

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

Yalnızca 2 kez tekrarlama, IE'nin pause () işleminden sonra medya akışını yüklemeye devam etmesini ve bununla bir diski doldurmasını önler.