छवि पर क्लिक होने पर ध्वनि फ़ाइल चलाएं

मैं मूल HTML प्रोग्रामर नहीं हूं, इसलिए कृपया इस सरल प्रश्न के बारे में मेरे ऊपर मत कूदो।छवि पर क्लिक होने पर ध्वनि फ़ाइल चलाएं

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

मैं जब कि चित्र को क्लिक खेले जाने वाले एक ध्वनि फ़ाइल हैं:

मैं एक छवि है कि, मैं निम्नलिखित कोड का उपयोग कर प्रदर्शित कर रहा हूँ है। मैं छवि को एक बटन बना सकता हूं, लेकिन यह किसी कारण से पृष्ठ के लेआउट को गड़बड़ कर रहा है।

मैं किसी भी खिलाड़ी का उपयोग करने के साथ ठीक हूं, लेकिन केवल एक चीज यह है कि मैं एक घुसपैठ करने वाला खिलाड़ी प्रदर्शित नहीं करना चाहता हूं। मैं बस उपयोगकर्ता को छवि दबाकर संगीत सुनना चाहता हूं। यदि वह एक और छवि दबाता है, तो वर्तमान संगीत को खेलना बंद करना होगा, और एक अलग ध्वनि खेला जाना चाहिए।

कृपया मदद करें! धन्यवाद!

स्रोत

2012-04-10 Prajoth

आप उपयोग कर सकते हैं [HTML5 ऑडियो टैग] (http://www.w3schools.com/html5/tag_audio.asp) और – Neysor

पर क्लिक करने के बाद इसे शुरू करने के लिए जावास्क्रिप्ट का उपयोग करें संभावित डुप्लिकेट: http://stackoverflow.com/questions/8489710/how-can-i-play-sound-in-jquery-when-click-a-button – Victor

सबसे पहले आपको jQuery का उपयोग करना होगा। आप कुछ पेज वाले अपने पृष्ठ में कुछ <div> बना सकते हैं, उदाहरण के लिए;

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

फिर, अपने जावास्क्रिप्ट में, जब आप फ़ाइल खेलना चाहते हैं, बस जोड़ने

$('#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>

उम्मीद है कि इससे मदद मिलती है।

स्रोत

2012-04-10 07:10:51

मुझे पसंद है यह घुलनशील आयन, लेकिन जावास्क्रिप्ट टैग विवरण कहता है "जब तक एक ढांचे/पुस्तकालय के लिए एक और टैग भी शामिल नहीं है, एक शुद्ध जावास्क्रिप्ट उत्तर की उम्मीद है।" शायद यह एक शुद्ध जावास्क्रिप्ट उत्तर के लिए एक अच्छा पूरक होगा। – 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>

स्रोत

2013-11-05 04:44:38

इस उत्तर https://stackoverflow.com/a/7620930/1459653 @klaustopher (https://stackoverflow.com/users/767272/klaustopher) द्वारा मुझे मदद की। उन्होंने लिखा है:

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

यहाँ कैसे मैं उनकी सलाह को लागू किया ताकि फ़ॉन्ट बहुत बढ़िया आइकन "पिता मात्रा-अप" पर क्लिक है "donkey2.mp3" में परिणाम (के बाद वेब पृष्ठ पर स्थित "खच्चर।") ध्वनि खेल (ध्यान दें: एमपी 3 सभी ब्राउज़रों में खेलने नहीं करता है):

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

स्रोत

2015-09-26 18:24:07

छवि पर क्लिक होने पर ध्वनि फ़ाइल चलाएं

उत्तर

संबंधित मुद्दे