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

时间:2015-02-28 23:01:20

标签: javascript image click

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

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);

2 个答案:

答案 0 :(得分:2)

根据所选浏览器中Javascript Audio API的实施情况,您可以使用https://developer.mozilla.org/en-US/docs/Web/API/AudioContext中记录的AudioContext界面。

答案 1 :(得分:-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。