播放音频当按钮被点击HTML的Django模板

Question

我有以下的HTML代码片段：

<audio controls><source src="{{sound.sound.url}}" type="audio/mpeg" id="yourAudioTag">Your browser does not support the audio element.</audio> 
<button id="play">Play</button> 
<script> 
    $(document).ready(function() { 
     var audioElement = document.getElementById('#yourAudioTag'); 

     $('#play').click(function() { 
      audioElement.play(); 
     }); 
    }); 
</script> 

，但它似乎并没有播放音频时，我的按钮PLAY点击。 我该怎么做？

Answer 1

您从未将音频文件分配给变量。在你的情况下，audioElement.play();没有任何玩法，因为它没有链接任何东西。

我的方法与您的方法稍有不同。我决定直接将音频文件放入JavaScript中。您可以波纹管检查：

纯JavaScript：

function Play_Audio(){ 
 
    var audioElement = document.createElement("audio"); 
 
    audioElement.src = "https://raw.githubusercontent.com/Metastruct/garrysmod-chatsounds/master/sound/chatsounds/autoadd/snoop_dogg/hold%20up%20wait.ogg"; 
 
    document.getElementById("Play_Button").addEventListener("click", function(music){ 
 
    audioElement.play(); 
 
    }, false); 
 
} 
 
Play_Audio();

<button id="Play_Button">Play</button>

的jQuery：

$(document).ready(function(){ 
 
    var audioElement = document.createElement("audio"); 
 
    audioElement.src = "https://raw.githubusercontent.com/Metastruct/garrysmod-chatsounds/master/sound/chatsounds/autoadd/snoop_dogg/hold%20up%20wait.ogg"; 
 
    $('#Play_Button').click(function(){ 
 
     audioElement.play(); 
 
    }); 
 
});

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

以从音频标签的声音：

document.getElementById("Play").addEventListener("click", function(music){ 
 
    var audioElement = document.getElementById("Audio"); 
 
    audioElement.play(); 
 
}, false);

<audio id="Audio" controls> 
 
    <source src="https://raw.githubusercontent.com/Metastruct/garrysmod-chatsounds/master/sound/chatsounds/autoadd/snoop_dogg/hold%20up%20wait.ogg" type="audio/ogg"> 
 
</audio> 
 
<div id="Play">Play Button</div>

PS：我花了更多的时间来找到一个合适的音频比写代码片段....我想，我有问题！