时间戳

首页 > 解决方案 > 我无法使用此 JS 代码播放音频。语法是正确的但是？

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

问题描述

我无法使用此 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>

查询：

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

标签： javascriptaudioonclicklistenerhtml5-audiobuttonclick

解决方案

首先添加 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>

推荐阅读