javascript - 音乐无法停止使用music.pause()

Question

music.pause(); 似乎在我的代码中不起作用。当我单击播放按钮(该按钮是使用 html 5 Canvas 中的框制作的)时，它可以播放音乐，但是当我单击停止按钮时，它不起作用。请帮助我。

这是我的代码:

var X = 0;
var Y = 0;
var mouse_click = false;

canvas.addEventListener("mousemove", function(e){  
    var boundRect = canvas.getBoundingClientRect();

    X =  e.pageX - boundRect.left  ;
    Y = e.pageY ;
    console.log(e.pageX+" "+e.pageY);
});

canvas.addEventListener("mousedown",function(e){
    mouse_click = true;
    var music_canon = new Audio("Assets/Music/Canon.mp3");

    if((X>=5 && X<=40) && (Y>=500 && Y<=560))  // for play button
    {
        music_canon.play();
    }

    else if ((X>=45 && X<=82) && (Y>=500 && Y<=560)) // for stop button
    {
        music_canon.pause(); //this code is not working, it's not stop the music
    }

当我点击停止按钮时，音乐仍在继续。

Answer 1

这是因为您每次都创建一个新元素。相反，请在函数外部创建 music_canon 并每次都引用相同的实例。

var music_canon = new Audio("Assets/Music/Canon.mp3");
canvas.addEventListener("mousedown", function(e) {
     if((X >= 5 && X <= 40) && (Y >= 500 && Y <= 560)) {
         music_canon.play();
     } else if ((X > =45 && X <= 82) && (Y >= 500 && Y <= 560)) {
         music_canon.pause();
     }
});