Develop Reference

Javascript audio play on click and stop on click

Current code:
<script>
function play() {
var audio = document.getElementById("audio");
audio.play();
}
</script>
<button class="matrixBtn" value="PLAY" onclick="play()">star shopping</button>
<audio id="audio" src="xxx"></audio>
When I press the button the music starts, which is exactly what I want. But I also want if I press the button again that the music stops. How can I do this without create a second button?

the <audio> tag is a HTMLMediaElement, so it has a property .paused which you can use to determine the current state and act accordingly:
function playPause() {
var audio = document.getElementById("audio");
if(audio.paused)audio.play();
else audio.pause();
}

Cannot get audio to play in JavaScript soundboard (total newbie here)

I'm trying to create, as a starting excercise, a soundboard for our D&D sessions. I'm currently trying to make it so that when a button is clicked, the variable 'audio' is set to that, and that it then runs the function to play or pause audio, depending on whether it's running or not. I have JS and HTML in the same file (I realise this isn't good, however). Below is my code:
<button id="play1st">Heroic Battle Music</button>
<button id="play2nd">Military Battle Music</button>
<button id="play3rd">Stronghold Battle Music</button>
<!--Audio to be played -->
<audio id="heroic" src="heroic.mp3"></audio>
<audio id="combat_rome" src="combat_rome.mp3"></audio>
<audio id="stronghold" src="stronghold.mp3"></audio>
<!--JavaScript audio -->
<script>
function playMusic() {
document.getElementById("play1st").addEventListener ('click', music1());
document.getElementById("play2nd").addEventListener ('click', music2());
document.getElementById("play3rd").addEventListener ('click', music3());
var isPlaying = false;
function music1() {
var audio = new Audio("heroic.mp3");
togglePlay();
};
function music2() {
var audio = new Audio("combat_rome.mp3");
togglePlay();
};
function music3() {
var audio = new Audio("stronghold.mp3");
togglePlay();
};
function togglePlay(){
if (isPlaying){
pause()
} else {
audio.play();
}
};
audio.onplaying = function () {
isPlaying = true;
};
audio.onpause = function () {
isPlaying = false;
}};
</script>
I'm probably missing something very basic, so any explanation would be most welcome. Thank you!

Reset button text after audio plays

I have a button that plays an audio file when you click playAudio with the text "PLAY VOICE AUDIO", and the text is changed to "PAUSE VOICE". It pauses if you click playAudio again(now with the text "PAUSE VOICE") when playing.
I would like the button text to go back to the "PLAY VOICE AUDIO" once the audio file has finished playing.
Thanks for any help in advance!
<div class="center">
<button id="playAudio">PLAY VOICE AUDIO</button>
</div>
<audio id="testAudio" hidden src="testaudioagainmp3.mp3" type="audio/mpeg"></audio>
<!-- Play/pause audio script -->
<script>
document.getElementById("playAudio").addEventListener("click", function() {
var audio = document.getElementById('testAudio');
if(this.className == 'is-playing') {
this.className = "";
this.innerHTML = "PLAY VOICE AUDIO"
audio.pause();
} else {
this.className = "is-playing";
this.innerHTML = "PAUSE VOICE";
audio.play();
}
});
</script>

var audio = document.getElementById('testAudio');
var btn = document.getElementById("playAudio");
audio.addEventListener('ended', function() {
btn.innerHTML = "PLAY VOICE AUDIO";
btn.className = "";
});

You are currently only have an event listener for clicks on your button playAudio. You need a second event listener for when the audio has ended playing. In this case it is simply the ended event, which you need to attach to your audio variable with addEventListener.
Below is the the code I would use.
// This part is just a refactored version of your current code.
var audio = document.getElementById('testAudio');
var playButton = document.getElementById('playAudio');
playButton.addEventListener('click', function() {
if(this.className == 'is-playing') {
this.className = "";
this.innerHTML = "PLAY VOICE AUDIO"
audio.pause();
} else {
this.className = "is-playing";
this.innerHTML = "PAUSE VOICE";
audio.play();
}
});
// This runs when the audio ends and will change the `playButton`'s text to be "PLAY VOICE AUDIO"
audio.addEventListener('ended', function() {
playButton.innerHTML = 'PLAY VOICE AUDIO';
playButton.className = '';
}
I would also suggest learning some ES6(the newest JavaScript version), but I have left the code as is.

JavaScript + HTML5 Audio Player - Stop Buffering, EventHandler Issues

I've written some javascript so that the player will stop buffering once its paused so it will stop buffering. The code basically destroys the player, creates a new one, every time either play or pause is pressed. My only problem is it seems that it only listens for the play or pause event once. If I do them again, the code no longer runs. Can someone PLEASE take a look at this and let me know what I did wrong? Before you ask, the reason I'm recreating the player is because I hear this is necessary to do for ios to actually stop buffering.. Is this true? If there is a better way please let me know, as any help would be appreciated.
Thanks! (Code Below)
<audio id="myaudio" controls>
<source id="sourceMp3" src="" autoplay type="audio/mp3" preload="none"/>
Your browser does not support the audio element.
</audio>
<script type="text/javascript">
var sourceMp3=document.getElementById('myaudio');
sourceMp3.src="url of mp3 stream";
function playfunc(){
var audio = document.getElementById('myaudio');
//audio.pause(0);
audio.src = "http://";
audio.load();
audio.remove();
var x = document.createElement("AUDIO");
x.setAttribute("id","myaudio");
x.setAttribute("controls", "controls");
x.setAttribute("src","http://");
x.load();
document.body.appendChild(x);
var audio = document.getElementById('myaudio');
audio.src = "http://";
audio.load();
audio.src = "url of mp3 stream";
audio.load();
audio.play();
console.log('play pressed')
}
function pausefunc(){
//var tmp = sourceMp3.src;
var audio = document.getElementById('myaudio');
audio.pause(0);
audio.src = "http://";
audio.load();
audio.remove();
var x = document.createElement("AUDIO");
x.setAttribute("id","myaudio");
x.setAttribute("controls", "controls");
x.setAttribute("src","http://");
x.load();
document.body.appendChild(x);
var audio = document.getElementById('myaudio');
audio.src = "http://";
audio.load();
audio.src = "url of mp3 stream";
audio.load();
audio.pause();
console.log('pause pressed');
}
document.getElementById('myaudio').addEventListener('pause', pausefunc, false);
document.getElementById('myaudio').addEventListener('play', playfunc, false);
</script>

Comment out your code and just log the click. Something is triggering an exception killing the event. You'll see it the event fires reliably without your code.

Video Onclick function for playing a video

I have designed a video question using Html and i have removed controls for video using Jquery, so i need to have onclick functionality like when we click on the video it should be played and if am clicking again it should be paused .

Below your html code
<video id="video" width="1180" height="664" poster="put here your poster url" preload="auto">
<source src="put here your video url" type="video/mp4">
</video>
Below jquery code
var video = document.getElementById("video");
video.addEventListener("click", function(event) {
if (video.paused == true) {
video.play();
}
else{
video.pause();
}
});

You can play or pause a vide like this. This should be able to toggle:
$(document).ready(function(){
$('YOUR_VIDEO_ID_OR_CLASS').click(function(){
$(this).get(0).paused ? $(this).get(0).play() : $(this).get(0).pause();
});
});

An easy way could be like this:
$(function() {
var video = $('video')[0];
$('button').click(function() {
if( video.paused ) {
video.play();
}
else {
video.pause();
}
});
});
Fiddle Example
You can change 'button' to another element as trigger for the play/pause.
You can also change it to the video it self, if you want just to click on the video to play and pause it.

This is what you need:
<script type="text/javascript">
function vidplay() {
var video = document.getElementById("Video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
}
else
{
video.pause();
button.textContent = ">";
}
}
</script>