javascript - JavaScript 和 HTML：相互重叠的音频

Question

我正在一个可以帮助有视力障碍的人的网站上进行研究。由于键盘的按钮，该站点必须播放音频文件。我的问题是：当我播放一个音频（例如 audio1）然后我播放另一个音频（例如 audio2）时，这两个音频相互重叠。我的想法是使用另一个按钮停止音频，例如 X。因此，如果正在播放 audio1 并且我按下 X，那么 audio1 应该停止。我将在这里添加我的代码。谢谢。

// 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;
        }

标签： javascripthtmlaudioplaybackpause

Answer 1

好的，所以我查看了您的代码，但问题是您将“播放器”变量存储在您的 checkKeyPressed(e) 方法中。所以每次你调用 checkKeyPressed 方法时，你的变量 player 都会被重置，因为在方法的开头你用 'var player;' 重新声明它。

要解决此问题，请确保 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。