Phát tệp âm thanh khi hình ảnh được nhấp

Tôi không phải là một lập trình viên HTML gốc, vì vậy xin vui lòng không nhảy qua tôi về câu hỏi đơn giản này.Phát tệp âm thanh khi hình ảnh được nhấp

Tôi có một hình ảnh đó, tôi đang hiển thị bằng cách sử dụng đoạn mã sau:

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

Tôi muốn có một tập tin âm thanh được chơi khi hình ảnh được nhấp vào. Tôi có thể làm cho hình ảnh một nút, nhưng đó là rối tung lên bố cục của trang vì một lý do nào đó.

Tôi ổn với việc sử dụng bất kỳ trình phát nào, nhưng điều duy nhất là tôi không muốn hiển thị trình phát xâm nhập. Tôi chỉ muốn người dùng nhấn hình ảnh và nghe nhạc. Nếu anh ấy nhấn một hình ảnh khác, nhạc hiện tại cần dừng phát và phải phát ra âm thanh khác.

Vui lòng trợ giúp! Cảm ơn!

Nguồn

2012-04-10 Prajoth

bạn có thể sử dụng [html5 thẻ âm thanh] (http://www.w3schools.com/html5/tag_audio.asp) và sử dụng javascript để bắt đầu sau khi nhấp vào – Neysor

Có thể trùng lặp: http://stackoverflow.com/questions/8489710/how-can-i-play-sound-in-jquery-when-click-a-button – Victor

Trước tiên, bạn phải sử dụng jQuery. Bạn có thể tạo một số <div> trong trang của bạn có một số id, ví dụ;

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

Sau đó, trong JavaScript, khi bạn muốn chơi các tập tin, chỉ cần thêm

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

toàn bộ mã trông giống như sau;

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

Hy vọng điều này sẽ hữu ích.

Nguồn

2012-04-10 07:10:51

Tôi thích giải pháp này ion, nhưng mô tả thẻ JavaScript cho biết "Trừ khi một thẻ khác cho khung/thư viện cũng được bao gồm, một câu trả lời JavaScript thuần túy được mong đợi". Có lẽ đây sẽ là một bổ sung tốt cho câu trả lời JavaScript thuần túy. – 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>

Nguồn

2013-11-05 04:44:38

Câu trả lời này https://stackoverflow.com/a/7620930/1459653 bởi @klaustopher (https://stackoverflow.com/users/767272/klaustopher) đã giúp tôi. Ông viết:

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

Đây là cách tôi thực hiện lời khuyên của ông để nhấp vào Font tạo ảnh vui nhộn biểu tượng "fa-volume-up" kết quả trong "donkey2.mp3" (nằm trên trang Web sau khi "con la"). chơi âm thanh (lưu ý: mp3 không phát hiện trong tất cả các trình duyệt):

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

Nguồn

2015-09-26 18:24:07

Phát tệp âm thanh khi hình ảnh được nhấp

Trả lời

Các vấn đề liên quan