How to add audio to a HTML image?

前端 未结 3 1812
离开以前
离开以前 2021-01-15 17:48

I\'m still new to all this, but I\'m trying to add audio mp3 sound to an HTML image, which is played when clicked on. How can I do this right?

I\'ve already tries a

相关标签:
3条回答
  • 2021-01-15 18:29

    You can achieve that using Audio and Video DOM methods play() and pause() onclick of image working Demo

    <audio id="audio_play">
        <source src="http://www.w3schools.com/tags/horse.ogg" type="audio/ogg" />
        <source src="http://www.w3schools.com/tags/horse.mp3" type="audio/mpeg" />
    </audio>
    
    <img src="http://bit.ly/1kX7D49" onClick="document.getElementById('audio_play').play(); return false;" />
    
    <img src="http://bit.ly/1mq0tIt" onClick="document.getElementById('audio_play').pause(); return false;" />
    
    0 讨论(0)
  • 2021-01-15 18:43

    You can use HTML5 Audio Tag:

    <audio controls>
      <source src="horse.ogg" type="audio/ogg">
      <source src="horse.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
    </audio> 
    

    More Information: http://www.w3schools.com/html/html5_audio.asp

    0 讨论(0)
  • 2021-01-15 18:53

    You won't need any player because html5 is able to play sound files. Check out this: http://www.w3schools.com/html/html5_audio.asp

    You can use jQuery to load the sound file.

    $('#my_image').click(function(){
       //some code to load the audio file here
    })
    

    Maybe you'll need some further code or css to hide controls and stop audio from playing etc.

    0 讨论(0)
自定义标题
段落格式
字体
字号
代码语言
提交回复
热议问题