Stuck with multi click event - javascript

I am stuck with the following. I have a play button. When the user clicks the first time on it, it should play the song and add a pause button to it. The second time you click on the button, it should pause the song.
Came up with this:
$('.play').click(function(event) {
event.preventDefault();
var trackID = $(this).closest('li').attr('data-id');
console.log(trackID);
$('#playlist li').removeClass('active');
$(this).parent().addClass('active');
if ( $(this).hasClass('play pause') ) {
console.log('false');
$(this).removeClass('pause');
} else {
console.log('true');
$(this).addClass('pause');
//return false;
}
if (nowPlaying) {
nowPlaying.stop();
}
SC.stream('/tracks/' + trackID, function(sound) {
if ( !$(this).hasClass('play pause') ) {
console.log('hellooo');
sound.play();
nowPlaying = sound;
} else {
console.log('byeee');
sound.pause();
nowPlaying = sound;
}
});
});
The above part will work correct. Play is the default of the button. When click the console.log send me the trackID: 91298058, true, and the string hellooo inside the stream function and the song is playing. The second time it will give me also the trackID 91298058, false and also the string hellooo. So the bug is here. Whenever you click the string hellooo will be send to the console.log. And the console.log - byeee will never be send and thus never be paused.
So in short, I would like to have one button that switch from play to pause and reverse. At play it should play the song: sound.play(); and at pause it should pause the song: sound.pause();;
Live demo
Does anyone know how to fix this issue?

In the callback function passed to SC.stream, $(this) is redefined.
You should cache it in the function attached to the click event, and use it after.
$('.play').click(function(event) {
event.preventDefault();
var button = $(this);
// the code
SC.stream('/tracks/' + trackID, function(sound) {
if ( button.hasClass('play pause') ) {
console.log('hellooo');
sound.play();
nowPlaying = sound;
} else {
console.log('byeee');
sound.pause();
nowPlaying = sound;
}
});
Also, you can just check for the class pause being present, instead of play pause.

I came up with the following work-around:
Create a boolean inside the click function and call it bool. Default is false;.
It is very similar to above code of #Colin Delhalle.
$('.play').click(function(event) {
event.preventDefault();
var trackID = $(this).closest('li').attr('data-id');
console.log(trackID);
$('#playlist li').removeClass('active');
$(this).closest('li').addClass('active');
var bool = false;
if ( $(this).hasClass('play pause') ) {
console.log('false');
bool = false;
$(this).removeClass('pause');
} else {
console.log('true');
$('#playlist li a').removeClass('pause');
$(this).addClass('pause');
bool = true;
}
if (nowPlaying) {
nowPlaying.stop();
}
SC.stream('/tracks/' + trackID, function(sound) {
if (bool) {
console.log('play');
sound.play();
nowPlaying = sound;
} else {
console.log('pause');
sound.pause();
nowPlaying = sound;
}
});
});
The only thing I think is very strange, is that the function pause doesn't pause the song, but stop it.. Does anyone know why?

Can you try to comment this line?
SC.stream('/tracks/' + trackID, function(sound) {
if ( !$(this).hasClass('play pause') ) {
console.log('hellooo');
sound.play();
nowPlaying = sound;
} else {
console.log('byeee');
sound.pause();
// nowPlaying = sound;
}
});

Related

How to unmute audio using Vanilla JS?

I have added mute function to my game, I know I can simply mute all audio on webpage by calling function mutePage(), but I was wondering how Can I make it unmuted back again without reloading a page.
function sound(src) {
this.sound = document.createElement("audio");
this.sound.src = src;
this.sound.setAttribute("preload", "auto");
this.sound.setAttribute("controls", "none");
this.sound.style.display = "none";
document.body.appendChild(this.sound);
this.play = function(){
this.sound.play();
}
this.stop = function(){
this.sound.pause();
}
}
function muteMe(elem) {
elem.muted = true;
elem.pause();
}
function mutePage() {
var elems = document.querySelectorAll("audio");
document.getElementById("snd").style.textDecoration = "line-through";
[].forEach.call(elems, function(elem) { muteMe(elem); });
}
You could do this with a button that your player clicks. Add an event listener to the button and inside of it mute your Audio Object.
button.addEventListener('click', () => {
this.sound.muted = false;
});
be sure to use an arrow function otherwise "this" will be scoped to the event handler context

I want to combine first function to the second one, so I can call it only once

I want to combine first function to the second one, so I can call it only once. Basically i have 2 html5 audio files that im playing. Everything works fine.But if i play my first audio and during that time if i click the second audio the pause button on first audio doesn't change to default(off)
//First function
function toggleState(item) {
if (item.className == "play") {
item.className = "pause";
} else {
item.className = "play";
}
}
//Second function
// Play stop Music
function EvalSound(soundobj) {
var thissound = document.getElementById(soundobj);
if (thissound.paused) {
thissound.play();
} else {
thissound.pause();
}
}
This question was answered in question by its owner with the following solution:
I Managed to fixed it like this.
function toggleState(item, soundobj) {
var thissound = document.getElementById(soundobj);
if (item.className == "play") {
thissound.play();
item.className = "pause";
} else {
thissound.pause();
item.className = "play";
}
}
I Also managed to get the current track list title. For Example, you click on a song and it will display after , say like "Now playing blablabla song".
I show you a working example below.
HTML:
<option id="1" title="Now Playing." value="URL.mp3">Song name</option>
Javascript:
audioURL = document.getElementById('mylist');
var f = audioURL.options[audioURL.selectedIndex].title; //Here is title
document.getElementById("demo").innerHTML = f; //output to f at demo elem.

Play and Pause with onclick on the same Img

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

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

Can addEventListener to an audio tag for play, but not set an onplay function

This does not work:
document.getElementById("audio").onplay = function () {
alert("in");
};
Also tried to use "onPlay", same result.
However, this does work:
document.getElementById("audio").addEventListener("play", function () {
alert("in");
}, false);
Am I missing something here?
I think you have to switch between the "play and pause" states take a look here
http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/
It should fire the first time you play when using onplay but it won't fire after that
therefore you should create a button that toggles both states
var playpause = document.getElementById('playpause');
video.onpause = function(e) {
playpause.value = 'Play';
playpause.onclick = function(e) { video.play(); }
}
video.onplay = function(e) {
playpause.value = 'Pause';
playpause.onclick = function(e) { video.pause(); }
}

Categories