单击图像时如何播放音乐

Question

我有一个图像已经改变了页面的背景，但我也希望它在我单击该图像时播放音乐。这是我的代码

HTML:

<div id="background">
        <div id="box">
            <div class="button">
                <img src="alien.png" type="button" id="my-button">
                <br>
                <p>Click The Alien!</p>
            </div>
        </div>

JavaScript:

 <script>
var myData = {
        1: {
        imageUrl: "8.gif",
        },
};
function changeImage() {
        var randomNumber = Math.floor((Math.random() * 1) + 1);
        document.getElementById("background").style.background = "url('" + myData[randomNumber].imageUrl + "')";
        document.getElementById("text-box").innerHTML = myData[randomNumber].text;
}
    document.getElementById("my-button").addEventListener("click", changeImage);

Answer 1

根据Javascript Audio API在所选浏览器中的实现情况，您可以使用AudioContext界面，如https://developer.mozilla.org/en-US/docs/Web/API/AudioContext.

Answer 2

  <script>
    $(function(){
       $(document).("click", "img.class", function() {
          var audioElement = document.createElement('audio');  //creates audio element
          audioElement.setAttribute('src', audiopath);         //setpath to audio files.
          audioElement.setAttribute('autoplay', 'autoplay');   //set auto play attributes.
          audioElement.addEventListener("load", function() {
             audioElement.Play();                              //plays audio element.
          }, true);
       });
    });

使用audioElement。