We Keep Coding

jQuery click Handler disables play button functionality in audio element

EDIT #1 with connexo’s solution
Within the following HTML, I want to click in the parent 'li' to play the child 'audio'
The problem is noted in the alert calls within the JS; i.e., trying to compare a HTMLLIElement with a HTMLAudioElement.
How can I successfully do that?
HTML:
I have several:
<li>
text here<br>
<audio controls preload="auto">
<source src="aSong.mp3">
</audio>
</li>
JS:
$('li:has(audio)').on("click", function(evt) {
var m, theSongInArray,
// thisSong = $(this)[0]; // HTMLLIElement
// now a HTMLAudioElement thanks to connexo
$thisLI = $(this);
thisSong = $thisLI.find('audio')[0];
// itsAllSongs defined elsewhere
for (m=0; m < itsAllSongs.length; m++)
{
// HTMLAudioElement
theSongInArray = itsAllSongs[m];
if (thisSong == theSongInArray)
{
if ( thisSong.paused )
thisSong.play();
else
{
thisSong.pause();
thisSong.currentTime = 0;
}
}
}
});
Note: connexo's solution is perfect - but now I have a new problem =
My intent above, which connexo has solved, was to be able to click anywhere within 'li:has(audio)' and have the toggling effect between .play() and .pause() .. and it now does that.
BUT, now the anywhere within 'li:has(audio)' seems to not include the play icon of:
If I click on the slider, the progress bar, the time-stamp, or anywhere else on the long <audio> control it works great, but not on the play icon on the far left of the above control.
SUPER wierd - this 2nd challenge goes away (I can then click just on the play icon) if I remove:
$('li:has(audio)').on("click", function(evt) {
})
Hopefully, connexo has another brilliant solution.
EDIT #2 = solution of the current problem:
Now, I can click on either the li area surrounding the <audio> element, or on just the <audio> element itself. As a matter of interest, when I click on just the play icon of <audio>, the song will play and, if I click on the position slider, the slider will move without playing/pausing the song itself:
/*
alert(evt.target); // = HTMLLIElement, or HTMLAudioElement
*/
if (evt.target.id.length == 0)
thisSong = $(this).find('audio')[0]; // HTMLLIElement -> HTMLAudioElement
else // >= 3, e.g., = "SSB" or "AIRFORCE"
thisSong = $(this)[0]; // [object HTMLAudioElement]

flickity.js play/pause video based on current cell

I am using Flickity to create a slider of images and videos. When changing slides, I want to play the video on the current slide (which has a class of .is-selected), and then pause again once I move to the next slide.
The code below manages to find any videos within the slider, but plays them on any slide change, rather than specifically for the slide they are within. Any help would be much appreciated.
// Init Flickity
var $carousel = $('.carousel');
$carousel.flickity();
// On slide change
$carousel.on('change.flickity', function() {
// Find videos
var currentSlide = $(this).find('.is-selected');
var video = $(this).find('video');
// Play videos
video[0].play();
});

What you want to do is pause all videos on every slide change and only play the one on the selected slide. I did something similar (without jQuery):
var carousel = document.querySelector(".carousel");
var flkty = new Flickity(carousel, {
// ..
});
flkty.on("change", function() {
console.log("Flickity active slide: " + flkty.selectedIndex);
flkty.cells.forEach(function(cell, i) {
if (cell.element == flkty.selectedElement) {
// play video if active slide contains one
// use <video playsinline ..> in your html to assure it works on ios devices
var video = cell.element.querySelector("video");
if (video) {
console.log("playing video " + i);
video.play();
}
return;
}
// pause all other videos
var video = cell.element.querySelector("video");
if (video) {
console.log("pausing video " + i);
video.pause();
}
});
});
As I stated in the comment, you might wanna use the "playsinline" attribute for your videos, otherwise you'll run into problems on iOS.
Also: using the "settle" event instead of "change" allows you to start playing once the active slide settled at its end position.

Toggle multiple play/pause buttons using Howler.js

I searched SE for a bit and I saw similar questions but nothing quite like what I needed help with.
I'm using Howler.js to stream audio on my site. The issue I ran into is that there are many songs on each page so when one song is playing, clicking the next song does not toggle the buttons...the music does start playing but the first song doesn't. I am aware that this is because I am using an ID such as Id="bodyPlayBtn" but I need it to toggle the buttons from the js currently. I thought of using this.toggleClass(ion-ios-play ion-ios-pause) in the function clickSongPlay() but that didn't quite seem to work. What is the best way to approach this?
Here is the relevant code:
HTML:
<div><i class="icon ion-ios-play" id="bodyPlayBtn" onclick="clickSongPlay('#song.Artist','#song.Title','#song.URL','#song.Album.ImageURL');"></i><i class="icon ion-ios-pause" id="bodyPauseBtn"></i></div>
If you are visual like me, this is what that div controls (blue arrow)
player.js
// Show the pause button.
if (sound.state() === 'loaded') {
bodyPlayBtn.style.display = 'none';
bodyPauseBtn.style.display = 'inline-block';
} else {
loading.style.display = 'block';
bodyPlayBtn.style.display = 'none';
bodyPauseBtn.style.display = 'none';
}
// Show the play button.
bodyPlayBtn.style.display = 'inline-block';
bodyPauseBtn.style.display = 'none';
// Bind our player controls.
bodyPlayBtn.addEventListener('click', function () {
player.play();
});
function clickSongPlay(artist, title, url, imageURL) {
//debugger;
player.playlist.push(
{
title: title,
artist: artist,
file: url,
imageURL: imageURL,
howl: null
}
);
player.skipTo(player.playlist.length - 1);
player.play();
}
bodyPauseBtn.addEventListener('click', function () {
player.pause();
});
This code works really well with just one play button, but when two enter the picture is when things get messy!

Javascript / jQuery check which button is currently playing a song

I'm currently trying to make a song selection list where a user can hit a button to preview a song. I'm struggling with the logic behind setting a buttons innerHTML to read 'Stop preview' when that buttons song is playing and also have the buttons HTML change when a user clicks another button.
Currently my script looks something like:
var playedBy;
var song;
var playing = false;
var audioPlayer = document.getElementById("demo");
function setSong(value, idForPlayed) {
song = value;
audioPlayer.src = song;
audioPlayer.play();
playedBy = idForPlayed;
var currentIdPlayingValue = document.getElementById(idForPlayed).value;
console.log(currentIdPlayingValue);
}
function valueGetter(button) {
song = button.value;
button.className += " playing";
var idForPlayed = button.id;
var value = song;
setSong(value, idForPlayed);
}
function doEnd() {
playing = false;
console.log('we have an end');
document.getElementById('demo').pause();
document.getElementById('demo').currentTime = 0;
}
With the value of the buttons being the URL i'm passing the audio object.
Any help is appreciated here, very unsure on the approach i should take.
Thanks all!
Simple example in code pen : http://codepen.io/anon/pen/XXwXYV

You could toggle the innerHtml and all of the other buttons html on click.
Something like
$('.btn').on('click', function(){
//Add or remove a class for the clicked button to determine if it's playing.
$(this).toggleClass('playing');
if($(this).hasClass('playing')){
//Set all buttons back to play
//And probably call some sort of Stop Playing function
$('.btn').html('Play').removeClass('playing');
$(this).html('Stop Playing').addClass('playing');
}else{
$('.btn').html('Play').removeClass('playing');
}
});

Click to turn off volume

I want to be able to turn on volume by clicking an image which I have worked out but I then want to turn off the volume when the image is clicked off.
I have two images that toggle between speaker on and speaker off
Speaker_on when clicked changes image to speaker off and audio plays
Speaker_off when clicked changes image to speaker on but audio does not turn off
I'm using setVolume to control the audio setttings
Here is my jquery code
$(document).ready(function(){
//use event delegation
$(document).on('click','#imageid',function(){
var $this= $(this);
$('#toggle').toggle('slide',function(){
//swap src of the image on toggle is completed
var imgsrc = $this.attr('src');
$this.attr('src',$this.data('othersource'));
$this.data('othersource',imgsrc);
});
});
});
And this is my html
<div id="toggle"><strong>Click speaker for volume</strong> </div>
<img src="images/speaker_on.jpg" onclick='jwplayer(smallvid).setVolume(80);'id="imageid" data-othersource="/images/speaker_off.jpg" />
This is the code that I need to call when the speaker off image is selected to the off image
jwplayer(smallvid).setVolume(0);
I've tried a couple of approaches but can't seem to get the volume to turn off when I toggle to the speaker off image.
Thanks

Try The JSfiddle here
jwplayer('playerveGLz8Hc').setup({
playlist: 'http://jwpsrv.com/feed/veGLz8Hc.rss',
width: '100%',
aspectratio: '16:9'
});
$("#infoToggler").click(function() {
var onVol = 100, offVol = 0 ;
var vol = jwplayer().getVolume();
if(vol == 0 )
{
jwplayer().setVolume(onVol);
$(this).find('img').toggle();
}
else{
jwplayer().setVolume(offVol);
$(this).find('img').toggle();
}
});
I am just toggling between image as you asked and setting volume on and off based on that, please check and let me know if it works
Happy to help