Javascript 音乐可以'；Don’不要停止使用音乐

music.pause（）在我的代码中似乎不起作用。当我点击播放按钮（该按钮是使用HTML5画布中的一个框制作的）时，它可以播放音乐，但当我点击停止按钮时，它不起作用。请帮帮我

这是我的密码：

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
    }

var X=0；
var Y=0；
var mouse_click=false；
addEventListener（“mousemove”，函数（e）{
var boundRect=canvas.getBoundingClientRect（）；
X=e.pageX-boundRect.left；
Y=e.pageY；
console.log（e.pageX+“”+e.pageY）；
});
canvas.addEventListener（“鼠标向下”，函数（e）{
鼠标点击=真；
var music_canon=新音频（“Assets/music/canon.mp3”）；
如果（（X>=5&&X=500&&Y=45&&X=500&&Y这是因为您每次都在创建新元素。相反，请在函数外部创建
music\u 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();
     }
});

var music_canon=新音频（“Assets/music/canon.mp3”）；
canvas.addEventListener（“鼠标向下”，函数（e）{
如果在每次鼠标向下事件中（（X>=5&&X=500&&Y=45&&X=500&&Y），您将启动一个新的音频。因此，下次单击您（在任一按钮上）时，暂停或播放指令将转到一个新的音频实例（）。将该var移到EventListener之外。我回滚了对标题的编辑。通过接受最能解决问题的答案，您可以将问题标记为已解决。我们不想污染标题，因为它们用于搜索。抱歉，我在这里还是新手