如何在一个页面上播放不同的音频文件

Question

我想通过使用不同的按钮在单个页面上播放不同的短音频剪辑，但是我的代码意味着所有按钮将仅播放位于的第一个 .mp3在音频文件夹中，无论 html 代码如何指定哪个按钮将播放哪个音频剪辑（下面的示例）。

你能帮我看看我错在哪里的代码吗？

谢谢！

<tr>
   <td><strong>Welcome!</strong></td>
   <td><a><input type="button" value="▶" onclick="play()">
   <audio id="audio" src="http://www.noiseaddicts.com/samples_1w72b820/3740.mp3"></audio></a>Diluedinpe! 
    </td>
 </tr>

  <tr>
    <td><strong>Good Evening</strong></td>
    <td><input type="button" value="▶" onclick="play()">
    <audio id="audio" src="http://www.noiseaddicts.com/samples_1w72b820/3719.mp3"></audio>Butuku bulenaga</td>
  </tr>

    <script>
       function play() {
         var audio = document.getElementById("audio");
         audio.play();
       }
     </script>

Answer 1

我认为您需要使用参数调用 onClick 函数，该参数将指定您想要的音频的 ID 运行。

<td>
  <a>
    <input type="button" value="▶" onclick="play(1)">
    <audio id="audio-1" src="http://www.noiseaddicts.com/samples_1w72b820/3740.mp3">
    </audio>
  </a> Diluedinpe!
</td>

在函数中，你只需要播放指定id的音频

var audio = document.getElementById($`audio{id}`);

Answer 2

您正在为音频使用相同的 ID。

其次，您将许多音频放在一个页面上。所以当用户点击多个音频时，所有的音频都会同时播放，这基本上不是预期的。

因此最好一次播放一个音频文件。 (jsfiddle)

你可以试试

<tr>
   <td><strong>Welcome!</strong></td>
   <td>
       Diluedinpe! 
     <audio preload="auto" controls  controlsList="nodownload" loop style="border:1px solid #000; border-radius:15px;">
        <source src="http://www.noiseaddicts.com/samples_1w72b820/3740.mp3" />
    </audio>
   </td>
</tr>

<tr>
  <td><strong>Good Evening</strong></td>
  <td>
     Butuku bulenaga
    <audio preload="auto" controls  controlsList="nodownload" loop style="border:1px solid #000; border-radius:15px;">
        <source src="http://www.noiseaddicts.com/samples_1w72b820/3719.mp3" />
    </audio>
  </td>
</tr>

和JS

有了这个 Javascript，只有一个音频播放，同一页面上的其他音频暂停...

<script>  
document.addEventListener('play', function(e){
   var audios = document.getElementsByTagName('audio');
    for(var i = 0, len = audios.length; i < len;i++){
       if(audios[i] != e.target){
            audios[i].pause();
       }
    }
 }, true);
</script>

JSFIDDLE

Answer 3

简单的方法你可以在onclick函数中传递音频标签id，然后在函数中通过传递的id获取音频标签：

<tr>
   <td><strong>Welcome!</strong></td>
   <td><a><input type="button" value="▶" onclick="play('audio1')">
   <audio id="audio1" src="http://www.noiseaddicts.com/samples_1w72b820/3740.mp3"></audio></a>Diluedinpe! 
    </td>
 </tr>

  <tr>
    <td><strong>Good Evening</strong></td>
    <td><input type="button" value="▶" onclick="play('audio2')">
    <audio id="audio2" src="http://www.noiseaddicts.com/samples_1w72b820/3719.mp3"></audio>Butuku bulenaga</td>
  </tr>

js:

<script>
    function play(audioId) {
       var audio = document.getElementById(audioId);
       audio.play();
    }
</script>

Answer 4

index.html

<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <table>
        <tr>
            <td><strong>Welcome!</strong></td>
            <td><a><input type="button" data-key="1" value="▶" onclick="play(this)">
                    <audio class="audio" data-key="1"
                        src="http://www.noiseaddicts.com/samples_1w72b820/3740.mp3"></audio></a>Diluedinpe!
            </td>
        </tr>

        <tr>
            <td><strong>Good Evening</strong></td>
            <td><input type="button" data-key="2" value="▶" onclick="play(this)">
                <audio class="audio" data-key="2"
                    src="http://www.noiseaddicts.com/samples_1w72b820/3719.mp3"></audio>Butuku bulenaga
            </td>
        </tr>
    </table>

    <script>
        function play(val) {
            var audio = document.querySelector(`audio[data-key="${val.dataset.key}"]`);
            audio.play();
        }
    </script>
</body>

</html>

如何在一个页面上播放不同的音频文件

How to play different audio files on a single page

html

javascript

audio

web