我无法使用此 JS 代码播放音频。语法是正确的但是？

Question

我无法使用此 JS 代码播放音频

        <h2>Home Security Campaign</h2>
        <p>Click the buttons to play or pause the audio.</p>
        <h3>Greetings</h3>

        <audio id="101" src="101.mp3" type="audio/mpeg"></audio>
        <audio id="102" src="102.mp3" type="audio/mpeg"></audio>
        <audio id="103" src="103.mp3" type="audio/mpeg"></audio>

        <button data-id="101" type="button">Greeting 1</button>
        <button data-id="102" type="button">Greeting 2</button>
        <button data-id="103" type="button">Greeting 3</button>

Jquery:

$('button').on('click', function(){ var audioId = $(this).data('id'); $('#' + audioId).get(0).play(); })

Answer 1

首先添加 jquery 库：只需在您的代码中添加下面给定的脚本标签。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

为了演示，我包含了在线 mp3 音频文件。

 $('button').on('click', function()
 {
 var audioId = $(this).data('id'); 
 $('#' + audioId).get(0).play(); 
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Home Security Campaign</h2>
<p>Click the buttons to play or pause the audio.</p>
<h3>Greetings</h3>
          
<audio id="101" src="https://www.w3schools.com/html/horse.ogg" type="audio/mpeg"></audio>
<audio id="102" src="https://www.w3schools.com/html/horse.ogg" type="audio/mpeg"></audio>
<audio id="103" src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3" type="audio/mpeg"></audio>
          
<button data-id="101" type="button">Greeting 1</button>
<button data-id="102" type="button">Greeting 2</button>
<button data-id="103" type="button">Greeting 3</button>

我无法使用此 JS 代码播放音频。语法是正确的但是？

I am unable to play audio with this JS code. Syntax is right but?

javascript

audio

buttonclick

html5-audio

onclicklistener