0

I'm trying to find a solution and way to toggle play & pause for multiple audio's for different onclick images.

Do you guys have any idea how to include pause by onclicking the image again.

I found a way for the onclick function to play the audio for the 2 different images, but I don't know how to make it pause by clicking on the image again.

Here is my fiddle

Thanks!!

<a nohref onclick="clicksound1.playclip()" style="cursor:pointer;" title="Facebook" target="_blank">

Falconfdfd
  • 13
  • 4

4 Answers4

1

To do this you need to use javascript. So in your HTML file you could do something like this:

In your HEAD section:

<script>
     var yoursound = new Audio();
     yoursound.src = "filename"; 
     function PlaySound() { yoursound.play(); }
</script>

In your BODY section:

<audio id="yoursound"> </audio> 
<button onclick="PlaySound()"> ... </button>
Cristian Assaiante
  • 26
  • 2
1

HTML: 

<audio id="audio" src="sound.mp3" ></audio>
<button onClick="playAudio ('audio')">PLAY!</button>

JS:

function playAudio (var id) {
    document.getElementById(id).play();
}
mozkomor05
  • 1,367
  • 11
  • 21
0

Add a html sound element:

<audio id="sound1">
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<button onclick="document.getElementById('sound1').play()">Button</button>

And add an onclick event to the button

Read this:

https://www.w3schools.com/tags/tag_audio.asp

https://www.w3schools.com/tags/ref_av_dom.asp

Andreas Moldskred
  • 305
  • 3
  • 16
0

    <script>
  function play(){
       var audio = document.getElementById("audio");
       audio.play();
                 }
   </script>

<a id="w00t" title="Facebook" target="_blank">
          <img src="https://d2fi4ri5dhpqd1.cloudfront.net/public/resources/social-networks-icon-sets/circle-dark-gray/facebook.png" alt="Facebook" title="Facebook" width="32" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;max-width: 32px !important"onclick="play()">
        </a>  
<audio id="audio" src="http://www.mashuptown.com/files/dj_morgoth_never_gonna_give_your_teen_spirit_up.mp3"type="audio/mp3"> ></audio>

Hey Guys,

Thank you very much for your answers! It helped me a step further and to find some solutions to solve my problem. As of now, I have the following code. This basically does what I want it to do and intent to do. Playing audio when you click on a picture rather than a button.

However, I'm not really satisfied that it doesn't show the finger icon when you hover over the Facebook icon. I tried to solve this with href, but I cant get it done without that it opens a new separate error tab/window with: {"error": "Please use POST request"}

Do you guys have any thoughts how to solve this? Thanks!

Falconfdfd
  • 13
  • 4