JavaScript kullanılarak oluşturulmuş bir sesi durdurun

Dec 17 2020

İşte benim senaryomun kabaca nasıl göründüğü.

var ButtonSelect = document.querySelectorAll(".musicBtn")

ButtonSelect.forEach(element => element.addEventListener("click", playMusic))

function playMusic(){
    var audio = new Audio("music1.mp3");
    if (this.id == "A")
        audio.play();
    else if (this.id == "B") {
        audio.src="music2.mp3";
        audio.play();
    } else if (this.id == "C") {
        audio.src="music3.mp3";
        audio.play();
    } ...
}

Ve hemen hemen bu şekilde devam ediyor. Dolayısıyla, hangi düğmeye basıldığına bağlı olarak farklı bir şarkı çalar. Ama bunu sadece bir düğmeye basmakla kalmayıp, aynı zamanda o anda çalan şarkıyı da durdurmasını istiyorum. Ses nesnesi yerel olarak oluşturulduğuna ve işlev çağrısından sonra kaybolduğuna göre, bunu nasıl yapabilirim? Sayfadan, nereden geldiğini belirtmeden çalmakta olan sesi durdurmasını istemenin bir yolu yok mu?

Yanıtlar

1 AHaworth Dec 17 2020 at 14:14

Soru, yeni bir ses seçildiğinde o anda çalan sesin nasıl duraklatılabileceğini sorar.

Ek bir sorun var. Verilen kod, bir düğmeye her basıldığında yeni bir öğe oluşturur, ancak hiçbir zaman ondan kurtulmaz, bu nedenle yavaş yavaş mağaza, asla tekrar ziyaret edilmeyecek ses öğeleriyle dolar.

Bunu aşmanın basit bir yolu, yalnızca bir ses öğesine sahip olmak ve bir düğmeye tıklandığında src'yi değiştirmektir. Bu şekilde, sonradan gereksiz hale gelen öğeleri oluşturmuyoruz.

Her şeyden önce bu kodu deneyin:

var ButtonSelect = document.querySelectorAll(".musicBtn")
var audio = new Audio("music1.mp3");

ButtonSelect.forEach(element => element.addEventListener("click", playMusic))

function playMusic(){
    audio.pause();
    if (this.id == "A") {
        audio.src="music1.mp3";
        audio.play();
    }
    else if (this.id == "B") {
        audio.src="music2.mp3";
        audio.play();
    } else if (this.id == "C") {
        audio.src="music3.mp3";
        audio.play();
    }
}

Bu iyi çalışırsa, kodunuzu basitleştirmeyi düşünebilirsiniz, örneğin, bir id aracılığıyla hangi sesin çalınacağını sıralamak yerine, ses kaynağını düğmelerinizin her birinde bir data-src özelliği olarak bulundurarak.