Dừng âm thanh được tạo bằng javascript

Question

Đây đại khái là kịch bản của tôi trông như thế nào.

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

Và nó khá nhiều diễn ra như thế này. Vì vậy, tùy thuộc vào nút nào được nhấn, một bài hát khác nhau sẽ phát. Nhưng tôi muốn làm cho nó không chỉ khởi động bài hát tương ứng mà còn phải dừng bất kỳ bài hát nào đang phát. Vì đối tượng âm thanh được tạo cục bộ và biến mất sau lệnh gọi hàm, làm cách nào để xử lý điều đó? Không có cách nào để chỉ yêu cầu trang dừng bất kỳ âm thanh nào đang phát mà không chỉ định nó đến từ đâu?

Answer 1

Câu hỏi hỏi làm thế nào âm thanh hiện đang phát có thể bị tạm dừng khi một âm thanh mới được chọn.

Có một vấn đề bổ sung. Đoạn mã đã cho tạo ra một phần tử mới mỗi khi một nút được nhấn nhưng nó không bao giờ bị loại bỏ vì vậy dần dần kho lưu trữ sẽ lấp đầy các phần tử âm thanh sẽ không bao giờ được xem lại.

Một cách đơn giản để giải quyết vấn đề này là chỉ có một phần tử âm thanh và thay đổi src khi một nút được nhấp. Bằng cách đó, chúng tôi không xây dựng các yếu tố sau đó trở nên thừa.

Trước hết, hãy thử mã này:

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

Nếu điều đó hoạt động tốt, bạn có thể xem xét đơn giản hóa mã của mình, chẳng hạn bằng cách đặt nguồn âm thanh làm thuộc tính data-src trong mỗi nút của bạn thay vì phải phân loại âm thanh nào sẽ phát qua id.