icon loses class attribute when swapped

[tonybabb]

Beverly very kindly helped me create a js script that played a sound file from a list and changed the play/pause icon. This works perfectly and the thread can be seen here http://www.dynamicdrive.com/forums/s...ht=#post310353 .

I have a small problem that I’ve been unable to fix. Some of the song titles are long and extend over two lines, when I click the play/pause icon the 2nd line of the title appears below the icon and not to the right of the icon. The effect can be seen here www.innocente.us/discography.php when you click on the play icon beside the song titles that extends over two lines the second line shows below the pause icon.

I think the problem is that when the play icon is clicked it is replaced by the pause icon but the attribute class=”fltlft” is removed and I can’t figure out how to retain it – I tried adding it to the variables playicon and pauseicon and it didn’t work - it fixed the alignment problem but when I clicked the pause icon the sound did not pause. Here's what I tried:

var playIcon = '<img class=”fltlft” src="images/play.png">';
		var pauseIcon = '<img class=”fltlft” src="images/pause.png">';

Here’s a sample html (using debugger) showing the play icon before being clicked:

<a href="#">
<img class="fltlft" src="images/play.png"/>

And here’s the html (using debugger)after the play icon is clicked

<a href="#">
<img src="images/pause.png"/>

Notice that the class=”fltlft” is missing.

Here’s the script that swaps the play/ pause icon - without my changes above.

<script>
var ctrl = document.getElementById('audio').getElementsByTagName('a');
for(var i = 0; i < ctrl.length; i++){
         ctrl[i].onclick = function(){
		var audio = this.nextSibling;
		while (audio.nodeType != 1){ audio = audio.nextSibling; }
		var playIcon = '<img src="images/play.png">';
		var pauseIcon = '<img  src="images/pause.png">';
		var pause = this.innerHTML === pauseIcon;
		this.innerHTML = pause ? playIcon : pauseIcon;
		var method = pause ? 'pause' : 'play';
		audio[method]();
		return false;
             }
     }
</script>

Thanks for any assistance you can provide.
Tony

[Beverleyh]

I revised the code in my demo a while back after I noticed that the play/pause toggle lost functionality with img tags. This version uses a <button> element with the image set as a background-image instead. The addition of the "pause" class changes the background-image.

CSS;

#audio button { height:64px; width:64px; margin:0.5em; vertical-align:middle; background:url(play.png) 50% no-repeat; border:0; cursor:pointer }
#audio button.pause { background-image:url(pause.png) }

HTML / JS;

<div id="audio">

<button class="fltlft" title="Play / Pause"></button> Song 1 - Takin' It All
<audio preload="none">
    <source src="takin_it_all.mp3" type="audio/mpeg" />
</audio><br/>

<button class="fltlft" title="Play / Pause"></button> Song 2 - Too Close
<audio preload="none">
    <source src="too_close.mp3" type="audio/mpeg" />
</audio><br/>

<button class="fltlft" title="Play / Pause"></button> Song 3 - Gettin' Down To Business
<audio preload="none">
    <source src="gettin_down_to_business.mp3" type="audio/mpeg" />
</audio><br/>

</div>


<script>
var ctrl = document.getElementById('audio').getElementsByTagName('button');
for(var i = 0; i < ctrl.length; i++){
	ctrl[i].addEventListener('click', function(){
		var audio = this.nextSibling;
		while (audio.nodeType != 1){ audio = audio.nextSibling; }
		var pause = this.className === 'pause fltlft';
		this.className = pause ? 'fltlft' : 'pause fltlft';
		var method = pause ? 'pause' : 'play';
		audio[method]();
		audio.addEventListener('ended', function(){
			this.previousElementSibling.className = 'fltlft';
			}, false);
		}, false);
	}
</script>

[tonybabb]

Hi Beverley,
Thank you for the reply replacing the img with a button. I tried the code you provided and it worked fine. When I added some of the additional formatting I'm using it stopped working - no sound was played. The first thing I added was just a <br /> in the song title and it failed. The original problem I was trying to solve was when a song with a long title played one line displayed alongside and the other below the play icon. You can see this original behaviour here www.innocente.us/discography.php when you click Play beside a long title.

So, I set up a test page using the buttons and with fewer songs than the original page and included all the various formatting I'm using. The test page can be seen here www.innocente.us/beverley.php . I'm afraid my js skills just aren't up to figuring out what the problem is....sigh.

Here is a sample of a song with a long title - i.e. it extends over two lines.

<button class="fltlft" title="Play / Pause"></button> <span class="songTitle" title="">When The Stone<br />Was Rolled Away</span>
<audio preload="none">
    <source src="music/Stone.mp3" type="audio/mpeg" />
</audio>
<div class="clearfloat"></div>

When I tried debugger it said it couldn't apply a method "Play" to an <Audio> object.

If you could point me in the right direction I'd really appreciate it.

Thanks,

Tony

[Beverleyh]

It comes down to these lines in the script - specifically the part in red;

		var audio = this.nextSibling;
		while (audio.nodeType != 1){ audio = audio.nextSibling; }

"this" is the button element, and "nextSibling" is the audio element - matching the original markup structure where <audio> is the next element after <button>.

Now, with you adding another element between <button> and <audio>, the audio element is no longer nextSibling of the button element, so the original script breaks. But you can adapt it to account for the extra nextSibling (the <span>) - replace the two lines above with these;

		var span = this.nextSibling;
		while (span.nodeType != 1){ span = span.nextSibling; }
		var audio = span.nextSibling;
		while (audio.nodeType != 1){ audio = audio.nextSibling; }

It also means that this line won't work either;

			this.previousElementSibling.className = 'fltlft';

There's another previousElementSibling to account for, so change the line to this;

			this.previousElementSibling.previousElementSibling.className = 'fltlft';

This makes the script work with your markup, providing that all your musical notes and song titles maintain this format;

<button class="fltlft" title="Play / Pause"></button> <span class="songTitle" title="">When The Stone<br />Was Rolled Away</span>
<audio preload="none">
    <source src="music/Stone.mp3" type="audio/mpeg" />
</audio>

The <br/> won't affect the script as its contained within the span.

[Beverleyh]

Scratch

		var audio = this.nextSibling;
		while (audio.nodeType != 1){ audio = audio.nextSibling; }

and

		var span = this.nextSibling;
		while (span.nodeType != 1){ span = span.nextSibling; }
		var audio = span.nextSibling;
		while (audio.nodeType != 1){ audio = audio.nextSibling; }

nextSibling is to account for older browsers - taken from a script that supports IE7/8 - but since this is an audio script that only needs to support modern browsers and IE9 and above due to native compatibility with the <audio> element, we can use nextElementSibling instead;

		var audio = this.nextElementSibling.nextElementSibling;