Воспроизведение звукового файла при нажатии на изображение

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

У меня есть изображение, которое я показываю, используя следующий код:

 <img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" />

Я хочу, чтобы звуковой файл воспроизводился при нажатии на это изображение. Я могу сделать изображение кнопкой, но по какой-то причине это портит макет страницы.

Меня устраивает использование любого плеера, но единственное - не хочется отображать навязчивый плеер. Я просто хочу, чтобы пользователь нажал на изображение и услышал музыку. Если он нажмет другое изображение, текущая музыка должна прекратить воспроизведение и должен воспроизводиться другой звук.

Пожалуйста помоги! Спасибо!


javascript html playback background-music
person Prajoth    schedule 10.04.2012    source источник
comment
вы можете использовать тег аудио html5 и использовать javascript, чтобы запустить его после нажатия   -  person Neysor    schedule 10.04.2012
comment
Возможный дубликат: stackoverflow.com/questions/8489710/   -  person Victor    schedule 10.04.2012

Ответы (2)


arrow_upward
5
arrow_downward

Сначала вы должны использовать jQuery. Например, вы можете создать несколько <div> на своей странице с каким-либо идентификатором;

<div id="wrap">&nbsp;</div>.

Затем в вашем JavaScript, когда вы хотите воспроизвести файл, просто добавьте

$('#wrap').append('<embed id="embed_player" src="audio.wav" autostart="true" hidden="true"></embed>');

весь код выглядит примерно так;

<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#track1').click(function(){
   $('#wrap').append('<embed id="embed_player" src="audio.wav" autostart="true" hidden="true"></embed>');
});
});
</script>
<img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" />
<div id="wrap">&nbsp;</div>

Надеюсь это поможет.

person Alfred    schedule 10.04.2012
comment
Мне нравится это решение, но в описании тега JavaScript говорится, что если не включен другой тег для фреймворка/библиотеки, ожидается ответ на чистом JavaScript. Возможно, это было бы хорошим дополнением к чистому ответу JavaScript. - person setholopolus; 28.11.2017

arrow_upward
5
arrow_downward

Этот ответ от @klaustopher мне помогло. Он написал:

В HTML5 появился новый тег -Tag, который можно использовать для воспроизведения звука. Он даже имеет довольно простой интерфейс JavaScript:

  <audio id="sound1" src="yoursound.mp3" preload="auto"></audio>
  <button onclick="document.getElementById('sound1').play();">Play
  it</button>

Вот как я реализовал его совет, чтобы щелчок по значку Font Awesome «fa-volume-up» (находится на веб-странице после «mule») приводил к воспроизведению звука «donkey2.mp3» (примечание: mp3 не воспроизводится). во всех браузерах):

<p>In short, you're treated like a whole person, instead of a rented mule. 
<audio id="sound1" src="assets/donkey2.mp3" preload="auto"></audio>
<a class="icon fa-volume-up" onclick="document.getElementById('sound1').play();"></a></p>
person Mark Gavagan    schedule 26.09.2015