Как добавить аудио в HTML-образ?

Question

Я все еще новичок во всем этом, но я пытаюсь добавить звуковой mp3-звук в HTML-изображение, которое воспроизводится при нажатии. Как я могу сделать это правильно?

Я уже пробовал несколько вещей, например, «тег» или установку java-файлов, например soundmanager2, однако ни один из них не работает. Проблема в том, что я не знаю, как правильно их использовать.

Я использую Dreamweaver CS6, в котором должен быть вариант «поведение» -> воспроизведение звука, но его там нет, поэтому я потерял все это.

Answer 1

Вы можете использовать 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> 

Дополнительная информация: http://www.w3schools.com/html/html5_audio.asp

Answer 2

Вам не нужно какой-либо игрок, потому что html5 способен воспроизводить звуковые файлы. Проверьте это: http://www.w3schools.com/html/html5_audio.asp

Вы можете использовать jQuery для загрузки звукового файла.

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

Может быть, вам понадобится дальнейший код или CSS, чтобы скрыть элементы управления и остановить звук из игры и т.д.

Answer 3

Вы можете добиться того, что с помощью Audio and Video DOM methodsplay() и pause() OnClick изображения 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;" />