CODEWITHSUNDEEP
javascriptjqueryaudio
qadenza
qadenza

Reputation: 9293

how to hide and play audio tag on a button click

I need to hide an audio tag and play it by clicking on a button. I treid - $('#audio').play(); and $('#audio').triger('play'); - without result.

In the snippet below there is no source file, but it exists in reality. It plays normaly by clicking on play controls button.

$('button').on('click', function(){
    $('#audio').play();
    //$('#audio').triger('play'); - also tried
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<audio controls id='audio'><source src="audio/clock.mp3" type="audio/mpeg"></audio>

<button>PLAY</button>

Upvotes: 0

Views: 1735

Answers (4)

awran5
awran5

Reputation: 4536

What I understand is that you want to hide/play the audio when you click on the button then show/stop it back when click again.

$(document).ready(function() {
    // Play flag
    var isPlaying = false;
    var audio = $('#audio')[0];
    var playBtn = $('#playBtn');

    // On click event
    playBtn.click(function() {
      if (!isPlaying) {
          playAudio();
      } else {
          stopAudio();
      }
    });

    function playAudio() {
      // set the flag to true
      isPlaying = true;
      // Play your audio
      audio.play();
      // Hide it
      $(audio).attr('hidden', 'hidden');
      // Change the button text to STOP
      playBtn.text('STOP');
    }

    function stopAudio() {
      // Set flag to false
      isPlaying = false;
      // Pause your audio
      audio.pause();
      // uncomment this if you want to reset the audio
      // audio.currentTime = 0;

      // Show it again
      $(audio).removeAttr('hidden');
      // Change the text back to play
      playBtn.text('PLAY');
    }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<audio controls id="audio" src="audio/clock.mp3"></audio>
<button id="playBtn">PLAY</button>

If you just want to play and hide it, try this:


var audio = $('#audio')[0];
var playBtn = $('#playBtn');

// On click event
playBtn.click(function() {
    // Play your audio
    audio.play(); 
    // Hide it
    $(audio).attr( 'hidden', 'hidden' );
    // Remove this if you don't want to change the button text
    playBtn.text('PLAYING');
});

Upvotes: 1

Kavinda Harshana
Kavinda Harshana

Reputation: 117

<audio controls id='audio' style='display:none'><source src="audio/clock.mp3" type="audio/mpeg"></audio>

$("button").on('click', function(){
document.getElementById("audio").play();

});

you can try this.. i added style part to audio tag

Upvotes: 1

ellipsis
ellipsis

Reputation: 12152

As $('#audio') is a jquery object .play() won't work because it is not a function related to jquery. Use $('#audio').get(0).play() to play the file using jquery

$('button').on('click', function(){
    $('#audio').get(0).play();
    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<audio  id='audio'><source src="audio/clock.mp3" type="audio/mpeg"></audio>

<button>PLAY</button>

Or do it using JavaScript

$('button').on('click', function(){
    document.getElementById('audio').play();
    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<audio  id='audio'><source src="audio/clock.mp3" type="audio/mpeg"></audio>

<button>PLAY</button>

Upvotes: 1

Pycnonotus
Pycnonotus

Reputation: 58

document.getElementById("audio").play();

Upvotes: 1

Related Questions