Odtwórz plik dźwiękowy po kliknięciu obrazu

Nie jestem native programistą HTML, więc proszę nie przeskakiwać nade mną na temat tego prostego pytania.Odtwórz plik dźwiękowy po kliknięciu obrazu

mam obraz, który, mam wyświetlanie za pomocą następującego kodu:

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

Chcę plik dźwiękowy odtwarzany po kliknięciu że obraz. Mogę sprawić, by obraz był przyciskiem, ale z jakiegoś powodu to psuje układ strony.

Nie mam nic przeciwko używaniu jakiegokolwiek odtwarzacza, ale jedyną rzeczą jest to, że nie chcę wyświetlać natrętnego gracza. Chcę tylko, żeby użytkownik nacisnął obraz i usłyszał muzykę. Jeśli naciśnie inny obraz, obecna muzyka musi przestać grać i musi być odtwarzany inny dźwięk.

Proszę pomóc! Dzięki!

Źródło

2012-04-10 Prajoth

można użyć [HTML5 tag audio] (http://www.w3schools.com/html5/tag_audio.asp) i skorzystaj z javascriptu, aby uruchomić go po kliknięciu na – Neysor

Możliwe duplikaty: http://stackoverflow.com/questions/8489710/how-can-i-play-sound-in-jquery-when-click-a-button – Victor

Najpierw musisz użyć jQuery. Możesz utworzyć na swojej stronie <div> z pewnym identyfikatorem;

<div id="wrap"> </div>.

Następnie w JavaScript, gdy chcesz odtworzyć plik, wystarczy dodać

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

cały kod wygląda mniej więcej tak;

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

Mam nadzieję, że to pomoże.

Źródło

2012-04-10 07:10:51

Podoba mi się ten solut jon, ale opis tagu JavaScript mówi: "Jeśli nie uwzględniono innego znacznika dla frameworka/biblioteki, oczekuje się czystej odpowiedzi na JavaScript." Być może byłoby to dobrym uzupełnieniem czystej odpowiedzi JavaScript. – setholopolus

<html>  
    <body> 
     <div id="container"> 
      <img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" class="play" /> 
     </div> 
    </body> 
</html>

<script> 
     $(document).ready(function() { 
      var audioElement = document.createElement('audio'); 
      audioElement.setAttribute('src', 'audio.mp3'); 
      audioElement.setAttribute('autoplay', 'autoplay'); 
      //audioElement.load() 

      $.get(); 

      audioElement.addEventListener("load", function() { 
       audioElement.play(); 
      }, true); 

      $('.play').click(function() { 
       audioElement.play(); 
      }); 

      $('.pause').click(function() { 
       audioElement.pause(); 
      }); 
     }); 
    </script>

Źródło

2013-11-05 04:44:38

Ta odpowiedź https://stackoverflow.com/a/7620930/1459653 przez @klaustopher (https://stackoverflow.com/users/767272/klaustopher) pomógł mi. Pisał:

HTML5 has the new <audio>-Tag that can be used to play sound. It even has a pretty simple JavaScript Interface: 

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

Oto jak ja realizowane za jego radą, tak aby kliknięcie na ikonę Font Awesome „fa-volume-up” skutkuje „donkey2.mp3” (znajduje się na stronie internetowej po „muła”). odtwarzanie dźwięku (uwaga: nie odtwarza mp3 we wszystkich przeglądarkach):

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

Źródło

2015-09-26 18:24:07

Odtwórz plik dźwiękowy po kliknięciu obrazu

Odpowiedz

Powiązane problemy