JavaScript 和 HTML：相互重疊的音頻

Question

我在一個可以幫助視力障礙人士的網站上從事研究工作。 由於鍵盤的按鈕，該站點必須播放音頻文件。 我的問題是：當我播放音頻（例如audio1）然后播放另一個音頻（例如audio2）時，兩個音頻相互重疊。 我的想法是使用另一個按鈕停止音頻，例如 X。因此，如果正在播放音頻 1 並且我按下 X，則音頻 1 應該停止。 我會在這里添加我的代碼。 謝謝。

// HTML:
<audio src="audio/homepage_benvenuto.mp3" autoplay>
        <audio src="audio/homepage_0.mp3" id="audio0">
            <p>Your browser does not support the audio element.</p>
        </audio>
        <audio src="audio/homepage_1.mp3" id="audio1">
            <p>Your browser does not support the audio element.</p>
        </audio>
        <audio src="audio/homepage_2.mp3" id="audio2">
            <p>Your browser does not support the audio element.</p>
        </audio>
        <audio src="audio/homepage_3.mp3" id="audio3">
            <p>Your browser does not support the audio element.</p>
        </audio>
        <audio src="audio/homepage_4.mp3" id="audio4">
            <p>Your browser does not support the audio element.</p>
        </audio>
        <audio src="audio/homepage_5.mp3" id="audio5">
            <p>Your browser does not support the audio element.</p>
        </audio>
        <audio src="audio/homepage_6.mp3" id="audio6">
            <p>Your browser does not support the audio element.</p>
        </audio>
        <audio src="audio/homepage_7.mp3" id="audio7">
            <p>Your browser does not support the audio element.</p>
        </audio>
        <audio src="audio/homepage_8.mp3" id="audio8">
            <p>Your browser does not support the audio element.</p>
        </audio>
        <audio src="audio/homepage_9.mp3" id="audio9">
            <p>Your browser does not support the audio element.</p>
        </audio>
        <audio src="audio/homepage_I.mp3" id="audioI">
            <p>Your browser does not support the audio element.</p>
        </audio>
    
    // JavaScript:
    var source = "audio/homepage_benvenuto.mp3"
    var audio = document.createElement("audio");
    audio.autoplay = true;
    audio.load()
    audio.addEventListener("load", function() 
    { 
        audio.play(); 
    }, true);
    audio.src = source;
   
    function checkKeyPressed(e) 
    {
        var player;

        if (e.keyCode == "48") // 48 = 0
        {
            document.getElementById('audio0').play()
            player = document.getElementById('audio0');
        }
        if (e.keyCode == "49") // 49 = 1
        {
            document.getElementById('audio1').play()
            player = document.getElementById('audio1');
        }
        if (e.keyCode == "50") // 50 = 2
        {
            document.getElementById('audio2').play()
            player = document.getElementById('audio2');
        }
        if (e.keyCode == "51") // 51 = 3
        {
            document.getElementById('audio3').play();
            player = document.getElementById('audio3');
        }
        if (e.keyCode == "52") // 52 = 4
        {
            document.getElementById('audio4').play();
            player = document.getElementById('audio4');
        }
        if (e.keyCode == "53") // 53 = 5
        {
            document.getElementById('audio5').play();
            player = document.getElementById('audio5');
        }
        if (e.keyCode == "54") // 54 = 6
        {
            document.getElementById('audio6').play();
            player = document.getElementById('audio6');
        }
        if (e.keyCode == "55") // 55 = 7
        {
            document.getElementById('audio7').play();
            player = document.getElementById('audio7');
        }
        if (e.keyCode == "56") // 56 = 8
        {
            document.getElementById('audio8').play();
            player = document.getElementById('audio8');
        }
        if (e.keyCode == "57") // 57 = 9
        {
            document.getElementById('audio9').play();
            player = document.getElementById('audio9');
        } 
      // Here I tried to create a script to stop the audio, but it doesn't work
         if (e.keyCode == "88") // 88 = X: interrompe audio in corso
        {
            player.pause();
            player.currentTime = 0;
        }

Answer 1

好的，所以我查看了您的代碼，但問題是您將“玩家”變量存儲在 checkKeyPressed(e) 方法中。 因此，每次調用 checkKeyPressed 方法時，您的變量 player 都將被重置，因為在該方法的開頭，您用“var player;”重新聲明了它。

要解決此問題，請確保玩家變量在您的方法之外，如下所示：

var player = null;
    
    function checkKeyPressed(e) 
    {

    if (e.keyCode == "48") // 48 = 0
    {
        document.getElementById('audio0').play()
        player = document.getElementById('audio0');
    }
    if (e.keyCode == "49") // 49 = 1
    {
        document.getElementById('audio1').play()
        player = document.getElementById('audio1');
    }
    if (e.keyCode == "50") // 50 = 2
    {
        document.getElementById('audio2').play()
        player = document.getElementById('audio2');
    }
    if (e.keyCode == "51") // 51 = 3
    {
        document.getElementById('audio3').play();
        player = document.getElementById('audio3');
    }
    if (e.keyCode == "52") // 52 = 4
    {
        document.getElementById('audio4').play();
        player = document.getElementById('audio4');
    }
    if (e.keyCode == "53") // 53 = 5
    {
        document.getElementById('audio5').play();
        player = document.getElementById('audio5');
    }
    if (e.keyCode == "54") // 54 = 6
    {
        document.getElementById('audio6').play();
        player = document.getElementById('audio6');
    }
    if (e.keyCode == "55") // 55 = 7
    {
        document.getElementById('audio7').play();
        player = document.getElementById('audio7');
    }
    if (e.keyCode == "56") // 56 = 8
    {
        document.getElementById('audio8').play();
        player = document.getElementById('audio8');
    }
  // Here I tried to create a script to stop the audio, but it doesn't work
     if (e.keyCode == "88") // 88 = X: interrompe audio in corso
    {
        player.pause();
        player.currentTime = 0;
    }
    }

小貼士：我看到您正在使用 e.keyCode == "88" 來暫停您的音樂。 這意味着您必須使用組合 Shift + x 來暫停音樂，而不是僅按鍵盤上的 x。