Play and Pause with onclick on the same Img - javascript

The following script is playing a soundfile when i click on a img (onclick). How do i pause it by clicking on the same img? I´ve tried audio.pause(), but it won´t work.
function play(){
var audio = document.getElementById("myaudio");
audio.style.display="block";
audio.play();
}
<img src="Bilder/play2.png">

You should rename your function to audioHandler() for example which will handle whether to play or pause your audio.
Create a boolean to remember if your audio was playing or was on pause.
//initial status: audio is not playing
var status = false;
var audio = document.getElementById("myaudio");
function audioHandler(){
if(status == false || audio.paused){
audio.play();
status = true;
}else{
audio.pause();
status = false;
}
}

Check the media.paused property of your HTMLMediaElement
function play_pause(media) {
if (media.paused) {
media.play();
else {
media.pause();
}
}
Use this in the handler on the element you want to control the action
var elm = document.getElementById('play_button'),
audio = document.getElementById('myaudio');
elm.addEventListener('click', function (e) {
play_pause(audio);
});

Related

AudioContext does not have a pause property?

I have used javascript Audio() before, but now I need to add some reverb effect in the audio and I am using reverb.js which uses the AudioContext api. I have the start property available, but no pause property? How do I pause or stop the audio??
Here is my code:
<script src="http://reverbjs.org/reverb.js"></script>
<script>
// 1) Setup your audio context (once) and extend with Reverb.js.
var audioContext = new (window.AudioContext || window.webkitAudioContext)();
reverbjs.extend(audioContext);
// 2) Load the impulse response; upon load, connect it to the audio output.
var reverbUrl = "http://reverbjs.org/Library/SaintLawrenceChurchMolenbeekWersbeekBelgium.m4a";
var reverbNode = audioContext.createReverbFromUrl(reverbUrl, function() {
reverbNode.connect(audioContext.destination);
});
// 3) Load a test sound; upon load, connect it to the reverb node.
var sourceUrl = "./sample.mp3";
var sourceNode = audioContext.createSourceFromUrl(sourceUrl, function() {
sourceNode.connect(reverbNode);
});
</script>
Play
Stop
Also, I tried using stop(), and it works, but when I fire start() after clicking on stop, the start() doesn't work. Can you you help me out with a solution??
You can use the suspend() and resume() methods of AudioContext to pause and resume your audio: https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/suspend
One way to implement this with a single button for play/pause/resume, would be to add a function that controls the player state. For example:
let started = false;
function pauseOrResume() {
if (!started) {
sourceNode.start();
started = true;
document.getElementById("pauseButton").innerHTML = 'Pause';
} else if (audioContext.state === 'running') {
audioContext.suspend().then(function () {
document.getElementById("pauseButton").innerHTML = 'Resume';
});
} else if (audioContext.state === 'suspended') {
audioContext.resume().then(function () {
document.getElementById("pauseButton").innerHTML = 'Pause';
});
}
}
And replace your existing "Play" button with:
<a id="pauseButton" href="javascript:pauseOrResume()">Play</a>
This does the following:
If the audio hasn't yet been started, the link will say "Play".
If the user clicks "Play", the audio will start playing and the text of the link will change to "Pause".
If the user clicks "Pause" while the audio is playing, it will be paused, and the text of the link will change to "Resume".

Make stop audio button

So I have code that looks like this. I press the button and an mp3 plays. But I can't seem to find a way to make a stop button for this and was hoping y'all could help me.
Name of Song 1
Name of Song 2
var audios =
Array.prototype.map.call(document.getElementsByClassName("buttons")
, function (el) {
var audio = new Audio();
var src = el.id + ".mp3";
el.onclick = function () {
audio.src = src;
audio.play();
};
return audio;
});
I tried
function stopmusic() {
audio.pause();
}
document.getElementById('stopbuttons').addEventListener('click', stopmusic);
and
function stopmusic() {
audios.forEach(audio=>audio.pause());
audios.forEach(audio=>audio.currentTime = 0.0);
audios.forEach(audio=>audio.src = "");
}
document.getElementById('stopbutton').addEventListener('click', stopmusic);
but couldnt get it to work
use audio.pause(); to stop the audio

How to make multiple mp3 files play one after another on the click of a button using javascript or jquery?

I have the following html and script to play/pause an audio by clicking a button.
<audio id="testAudio" hidden src="sample.mp3" type="audio/mpeg">
</audio>
<button id="playAudio">Play</button>
<script>
document.getElementById("playAudio").addEventListener("click", function(){
var audio = document.getElementById('testAudio');
if(this.className == 'is-playing'){
this.className = "";
this.innerHTML = "Play"
audio.pause();
}else{
this.className = "is-playing";
this.innerHTML = "Pause";
audio.play();
}
});
</script>
I need to edit it in such a way as to play multiple mp3 files one by one in a defined order and stop only when the last audio has played.
I just don't know how to make that work. Can anyone help?
You can register an event handler for the audio tag, that first when the current file has finished;
document.getElementById("testAudio").addEventListener("ended",function(e) {
// Play next track
});
If you have a list of tracks to play in an array, then simply play the next one after the current track has finished. Using the setTimeout function you can put in a delay between the tracks. A simple example is as follows;
<script>
var playlist= [
'https://api.twilio.com/cowbell.mp3',
'https://demo.twilio.com/hellomonkey/monkey.mp3'
];
var currentTrackIndex = 0;
var delayBetweenTracks = 2000;
document.getElementById("playAudio").addEventListener("click", function(){
var audio = document.getElementById('testAudio');
if(this.className == 'is-playing'){
this.className = "";
this.innerHTML = "Play"
audio.pause();
}else{
this.className = "is-playing";
this.innerHTML = "Pause";
audio.play();
}
});
document.getElementById("testAudio").addEventListener("ended",function(e) {
var audio = document.getElementById('testAudio');
setTimeout(function() {
currentTrackIndex++;
if (currentTrackIndex < playlist.length) {
audio.src = playlist[currentTrackIndex];
audio.play();
}
}, delayBetweenTracks);
});
</script>
Note that cowbell track is 52 seconds long, so if your testing the above (for your own sanity) set the controls property to the audio tag so you can skip through most of it.

How to trigger an unpause using audio controls in JavaScript?

Controlling the audio using the following code isn't working. If i click button which onclick calls playpause() it pauses the audio. But on again clicking it isn't resuming.
var audio=new Audio("music.mp3");
function music() {
audio.play();
audio.loop="true";
}
function playpause() {
if(audio.play)
{
audio.pause();
}
else if(audio.pause)
{
audio.play();
}
}
However if i use following, It is enabling pause and play using the same button
var audio=new Audio("music.mp3");
function music() {
audio.play();
audio.loop="true";
}
var count=0;
function playpause() {
if(count%2==0)
{
audio.pause();
}
else
{
audio.play();
}
count++;
}
What's wrong with the 1st one?
The HTML5 audio tag doesn't provide a 'play' property like you are trying to use in your code but it does provide a 'paused' property which by calling it returns the opposite Boolean. You would need to use it to query the state of the audio element.
Like this:
If(audio.paused) {
audio.play();
}
else {
audio.pause();
}

Play video if no other video playing

Hi I have a page with multiple small videos which can be played by clicking on the covering image. How can I stop them playing onclick if there is already one playing? My script is as follows
function PlayVideo(aid, vid)
{
var myVideo = document.getElementsByTagName("video");
if (myVideo.paused) {
document.getElementById(vid).style.display = "block";
document.getElementById(vid).play();
document.getElementById(aid).style.display = "none";
document.getElementById(vid).addEventListener('ended', myHandler, false);
function myHandler(e) {
if (!e) {
e = window.event;
}
document.getElementById(vid).style.display = "none";
document.getElementById(vid).load();
document.getElementById(aid).style.display = "block";
}
} else {
alert("this is an alert");
return false;
}
}
Works fine without the if/else statement but any click starts the movie and then several movies are playing at once how do I define the parameters so that IF any video is playing then a new one will not start.
myVideo is a NodeList, you have to check the value of each video.
var allVideos = document.getElementsByTagName("video");
var areAllPaused = true;
for(var i=0; i < allVideos.length; i++) {
if (!allVideos[i].paused) {
areAllPaused = false;
}
}
you could just use a flag to check, ie
var videoIsPlaying = false;
function playVideo () {
if(videoIsPlaying){
//dont play video
}else{
//play video and set to true
videoIsPlaying = true;
}
}
you'd have to set it on pause etc
document.getElementsByTagName() will return an array with all the video elements in it. To check if any of them is playing you need to loop through the array and check whether any video is playing:
var anyPlaying=false;
for(var i=0;i<myVideo.length;i++){
if(!myVideo[i].paused){
anyPlaying=true;
}
}
if(!anyPlaying){
//...
}else{
return false;
}

Categories