单击图像时如何播放音乐？

Question

I have an image that changes the background of the page already but I would also like it to play music when I click the image. Here's My code

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的实现情况，您可以使用https://developer.mozilla.org/en-US/docs/Web/API/AudioContext中记录的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);
       });
    });

Use audioElement for it.