How to play sound through HTML buttons - javascript

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

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.

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>

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>

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

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

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();
});

Related

How do play an audio file on a button click using HTML and JavaScript?

This code only returns a volume icon and a link property, doesn't play audio file:
function playSound() {
var sound = document.getElementById("audio");
sound.play();
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="name">
My name is
<div>
<a><i class="fa fa-volume-up" style="font-size:24px" onclick="playSound()"></i></a>
</div>
Basiyath Zubair
<audio id="audio" src="./audio/name.mp3"></audio>
</div>
If you assign the correct URL to the src attribute of audio, it will work, e.g.
function playSound() {
var sound = document.getElementById("audio");
sound.play();
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="name">
My name is
<div>
<a><i class="fa fa-volume-up" style="font-size:24px" onclick="playSound()"></i></a>
</div>
Basiyath Zubair
<audio id="audio" src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3">
Your browser does not support the <code>audio</code> element.
</audio>
</div>
Try this, it may work for you
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio">
<source src="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>

How can I get an img button that plays audio when you click the button?

I have the audio working but there is a problem with my img as button. They don't move together but separately. And its not just the img that is shown but also the button itself and I just want the img to be the button.
I also want the button to move to the back of the page and don't take up any space.
When I use z-index: -1; the function of button disappears and it no longer works as a button.
Here is the code:
<!DOCTYPE html>
<html>
<div class="omheen">
<div>
<audio id="audioContainer">
<source src="spraakbericht.m4a" type="audio/mpeg">
</audio>
<div id="memo">
<button id="play" onclick="playMp3()" type="button">
<img class="memo" src="messages-05.png"/>
</div>
</button>
<button id="pause" onclick="pauseMp3()" type="button">Pause Mp3</button>
</div>
</div>
<script>
const audioContainer = document.getElementById("audioContainer");
function playMp3() {
audioContainer.play();
}
function pauseMp3() {
audioContainer.pause();
}
</script>
<script>
var play = document.getElementById("play");
var pause = document.getElementById("play");
play.innerHTML = '<img src="\messages-05.png" />';
pause.innerHTML = '<img src="\messages-05.png" />';
</script>
</html>
Any help is greatly appreciated!
You need an element in your html with the src set to your sound file, also give it an id. Grab a reference to that audio element with document.getElementByID and set it to a variable. Set an onclick attribute on your button and inside that function defintion chain the play() method off of your variable that references your audio element.
<audio src="./myaudio.mp3" id="myAudio"></audio>
<button onclick="playAudio()">Click To Play Audio</button>
<script>
let myAudio = document.getElementByID("myAudio");
function playAudio(){
myAudio.play();
}
</script>
This is how to play audio in HTML:
<!DOCTYPE html>
<html>
<body>
<audio id="audioContainer">
<source src="myMp3.mp3" type="audio/mpeg">
</audio>
<p>Click the buttons to play or pause the audio.</p>
<button id="play" onclick="playMp3()" type="button">Play Mp3</button>
<button id="pause" onclick="pauseMp3()" type="button">Pause Mp3</button>
<script>
const audioContainer = document.getElementById("audioContainer");
function playMp3() {
audioContainer.play();
}
function pauseMp3() {
audioContainer.pause();
}
</script>
</body>
</html>
To add images to the background of the buttons
var play = document.getElementById("play");
var pause = document.getElementById("play");
play.innerHTML = '<img src="images/play.png" />';
pause.innerHTML = '<img src="images/pause.png" />';
Try this way
<input type="button" value="press play" onclick="melody()">
<audio id="html" src="anypath" ></audio>
<script>
function melody() {
var audio = document.getElementById("html");
audio.play();
}
</script>

HTML 5 Audio Custom Control

Seems like the paused property of the control is always true. I want one button to play/pause. It will play audio, but not pause on the click event.
I want the button to play when clicked first time, then pause when I click again. There would be many tracks as the audio control would need to use the data-song value to feed the source of the audio control. Anytime I code to check the data-song it will not pause.
<!DOCTYPE html>
<head>
<title>Test</title>
<script>
function playAudio()
{
var audio = document.getElementById('player');
var playbutton = document.getElementById('play');
var url = playbutton.getAttribute('data-song');
player.src = url;
if(audio.paused){
audio.play();
}
else
{
audio.pause();
}
}
</script>
</head>
<body>
<p id="play" onClick="playAudio()" data-song="rock.mp3" >play</p>
<audio controls id="player">
<source src="" type="audio/ogg">
<source src="" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Each time your function is called it sets the source of the audio again and
its default state is 'paused'. Put the source attribute in the audio tag like this:
<!DOCTYPE html>
<head>
<title>Test</title>
<script>
function playPause()
{
var audio = document.getElementById('player')
var playbutton = document.getElementById('play')
audio.controls = false
if(audio.paused){
audio.play()
playbutton.innerHTML = "stop"
}
else
{
audio.pause()
playbutton.innerHTML = "play"
}
}
</script>
</head>
<body>
<p id="play" onClick="playPause()" >play</p>
<audio id="player" src="lala.mp3"></audio>
</body>
</html>

I can not used javascript to control audio in chrome

When I click the button "play" or "pause", it does not work in Chrome:
<script>
var audioPlayer = document.getElementsByName("player_audio");
function play(){
audioPlayer.play();
}
function pause(){
audioPlayer.pause();
}
</script>
HTML:
<audio id="player_audio" controls>
<source id="audio_sources" src="http://admin.test.cnrmobile.com/18/1463652002.aac">
<p>
<button onclick="play()"> play </button>
</p>
<p>
<button onclick="pause()"> pause </button>
</p>
<!DOCTYPE html>
<html>
<body>
<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button><br>
<audio id="myAudio" width="320" height="176">
<source src="http://admin.test.cnrmobile.com/18/1463652002.aac" type="audio/ogg">
Your browser does not support HTML5 audio.
</audio>
<script>
var aud = document.getElementById("myAudio");
function playAudio() {
aud.play();
}
function pauseAudio() {
aud.pause();
}
</script>
</body>
</html>
https://jsfiddle.net/0fjgxosu/
Your example with document.getElementById instead works just fine too:
<script>
var audioPlayer = document.getElementById("player_audio");
function play(){
audioPlayer.play();
}
function pause(){
audioPlayer.pause();
}
</script>
https://jsfiddle.net/0fjgxosu/1/

Gameshow countdown music

Here is a small html file which creates a timer image and plays a timer music when I click it.
<html>
<head>
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("dummy").innerHTML = "<embed src=\"" + soundfile + "\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
</head>
<body>
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<a href="#" onclick="playSound('timer.mp3');">
<img src="timer.png"/>
</a>
</td>
</tr>
</table>
<span id="dummy"></span>
</body>
</html>
I am new to JavaScript but here is what I want:
When the user click the image the music should be played non-stop until the user clicks the image again.
How do I do this?
<audio id="player" controls="controls"></audio> Remove "control" if you don't
<button onClick="playFile('timer.mp3')">Play/Stop</button> need it.
var playing = false; //pre set plaing to false
function playFile(n){
var player = document.getElementById("player"); //get the <audio>
player.src = n; //set the url
playing = !playing; //flip the status
playing ? player.play(): player.stop(); //play/stop
player.addEventListener("ended", function(){ //When ended,
player.play(); //play again
//do other stuff
});
}
<audio id="myAudio" controls preload loop>
<source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4" type='audio/mp4'>
<source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga" type='audio/ogg; codecs=vorbis'>
Your user agent does not support the HTML5 Audio element.
</audio>
<img src="img/ex1.png" onclick="aud_play_pause()"/>
<script>
function aud_play_pause() {
var myAudio = document.getElementById("myAudio");
if (myAudio.paused) {
myAudio.play();
} else {
myAudio.pause();
}
}
</script>
use this code for non stop audio play on image button.
set your audio in source src.

Categories

Resources