'How to play sound through HTML buttons

My current method of playing music through my website is by the HTML audio tags. However I want to be able to play it through HTML button instead. This button should be able to toggle the music between playing and stopping. I've created an example on JSFiddle but don't know how to implement it. Could someone please show me how to do it using my JSFiddle example?

JSFiddle: http://jsfiddle.net/jTh3v/332/

Original way I done it:

document.getElementById("soundTag").innerHTML = "<audio controls volume preload='none' src='http://www.sousound.com/music/healing/healing_01.mp3'></audio>";
javascriptjqueryhtmlbuttonaudio


Solution 1:[1]

you can play sound by onclick event...insert a button on html.write a function and call it at your button as onclick event.

function playMusic(){
  var music = new Audio('musicfile.mp3');
  music.play();
  }
<input type="button" value="sound" onclick="playMusic()" />

Make sure to give a valid filename.

Solution 2:[2]

This will work:

document.getElementById("soundTag").innerHTML = "<audio controls volume preload='none' src='http://www.sousound.com/music/healing/healing_01.mp3'></audio>";

$('#button_play').on('click', function() {
	//I added this
	$("audio")[0].play();
  
  $('#button_pause').show();
  $('#button_play').hide();
});
$('#button_pause').on('click', function() {
	//I added this
	$("audio")[0].pause();
  
  $('#button_play').show();
  $('#button_pause').hide();
});
.second {
  display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <p>Instead of doing the audio tag method, I want to do it through the buttons. However I don't know how to do this.</p><br>

  <p>HTML Audio tag method (the method I don't want):</p>
  <div id="soundTag"></div><br>

  <p>Button method (the method I want, but doesn't work):</p>
  <div>
    <button id="button_play" class="first" type="button">
      <i class="glyphicon glyphicon-volume-up"></i></button>
    <button id="button_pause" class="second" type="button">
      <i class="glyphicon glyphicon-volume-off"></i></button>
  </div>

Solution 3:[3]

This worked. Delete my mp3 file and upload your own mp3 file.

<button id="ASong" onClick="playPause()">
  <audio
    src="file_example_MP3_700KB.mp3"
    autoplay
    loop
  ></audio>
  Song
</button>

<script>
  var aud = document.getElementById("ASong").children[0];
  var isPlaying = false;
  aud.pause();

  function playPause() {
    if (isPlaying) {
      aud.pause();
    } else {
      aud.play();
    }
    isPlaying = !isPlaying;
  }
</script>

Solution 4:[4]

try it like this


    $('#button_play').on('click', function() {
      $('#button_pause').show();
      $('#button_play').hide();
      $('audio')[0].play();
    });
    $('#button_pause').on('click', function() {
      $('#button_play').show();
      $('#button_pause').hide();
      $('audio')[0].pause();
    });

The idea here is to take the audio element from the array that returns and use the methods for the HTML5 tag. All the methods you can find from here

Solution 5:[5]

Play and pause buttons.

Info and code comes from https://www.w3schools.com/jsref/met_audio_play.asp

I put it on this http://jsfiddle.net/654qasw0/ (changing sound sources)

enter image description here

<!DOCTYPE html>
<html>
<body>

<audio id="myAudio">
  <source src="https://upload.wikimedia.org/wikipedia/commons/1/11/H_is_for_horse.ogg" type="audio/ogg">
  <source src="http://www.u86news.com/Music/Sounds/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<p>Click the buttons to play or pause the audio.</p>

<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button> 

<script>
var x = document.getElementById("myAudio"); 

function playAudio() { 
  x.play(); 
} 

function pauseAudio() { 
  x.pause(); 
} 
</script>

</body>
</html>

Solution 6:[6]

Try this:

<!DOCTYPE html>
<html>
<body>

<audio id="myAudio">
  <source src="https://upload.wikimedia.org/wikipedia/commons/1/11/H_is_for_horse.ogg" type="audio/ogg">
  <source src="http://www.u86news.com/Music/Sounds/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<p>Click the buttons to play or pause the audio.</p>

<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button> 

<script>
var x = document.getElementById("myAudio"); 

function playAudio() { 
  x.play(); 
} 

function pauseAudio() { 
  x.pause(); 
} 
</script>

</body>
</html>

or:

<button id="ASong" onClick="playPause()">
  <audio
    src="file_example_MP3_700KB.mp3"
    autoplay
    loop
  ></audio>
  Song
</button>

<script>
  var aud = document.getElementById("ASong").children[0];
  var isPlaying = false;
  aud.pause();

  function playPause() {
    if (isPlaying) {
      aud.pause();
    } else {
      aud.play();
    }
    isPlaying = !isPlaying;
  }
</script>

if they don't work just try this:

    $('#button_play').on('click', function() {
  $('#button_pause').show();
  $('#button_play').hide();
  $('audio')[0].play();
});
$('#button_pause').on('click', function() {
  $('#button_play').show();
  $('#button_pause').hide();
  $('audio')[0].pause();
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Surya Teja
Solution 2 Zorken17
Solution 3
Solution 4
Solution 5 Rub
Solution 6 MaxLearning

Related Questions