change mp3 player to button only

**mlegg** · 05-15-2014, 12:22 AM

Hi, On a site I will be uploading I need to have a background sound per the customer. I am using this code (in HTML5)

Code:

<audio controls autoplay loop style="width:300px" height="25px">
<source src="media/waves.mp3" type="audio/mpeg">
</audio>

I want to change the default player look to just a simple play button like this.

Name: button-play_blue.png
Views: 652
Size: 1.4 KB

Also is float:right allowed in HTML5? I'd like the button to be to the far top right of the page, and centered at the top will be a short text h1 tag
thanks

**jscheuer1** · 05-15-2014, 03:13 AM

Last question first, yes float: right is allowed in HTML5. Now as to the other issue - mp3 will not play in all browsers (add an alternative .ogg version source), and autoplay will not execute in most hand helds (I don't think you can have your cake and east it too on this one). For autoplay what I'm saying is that if you choose autoplay, a custom button is going to get messy in browsers that don't allow autoplay, whereas the default controls will take into account that autoplay didn't fire. Or you can just assume that all hand helds will not do autoplay and make their tags not include that.

With those things in mind you can have a custom button something like so:

Code:

<!DOCTYPE html>
<html>
<head>
<title>Custom Audio Control Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
audio {visibility: hidden; height: 0; width: 0; position: absolute; top: -300px; left: -300px;}
#pauseplay {float: right; width: 64px; height: 64px; overflow: hidden;}
</style>
</head>
<body>
Hi!
<audio controls loop>
<source src="ocean-wave-2.ogg" type="audio/ogg">
<source src="ocean-wave-2.mp3" type="audio/mpeg">
</audio>
<img id="pauseplay" src="button-play_blue.png" alt="button" title="Play/Pause">
<script type="text/javascript">
(function(){
	var playing = !!('ontouchstart' in window) || !!('ontouchstart' in document.documentElement) || !!window.ontouchstart || (!!window.Touch && !!window.Touch.length) || !!window.onmsgesturechange || (window.DocumentTouch && window.document instanceof window.DocumentTouch),
	snd = document.getElementsByTagName('audio')[0],
	ctrl = document.getElementById('pauseplay');
	playing = !playing;
	ctrl.title = playing? 'Pause' : 'Play';
	if(playing){snd.autoplay = true;}
	ctrl.addEventListener('click', function(){
		if(playing){
			snd.pause();
		} else {
			snd.play();
		}
		playing = !playing;
		ctrl.title = playing? 'Pause' : 'Play';
	}, false);
})();
</script>
</body>
</html>

Demo:

http://home.comcast.net/~jscheuer1/s.../wave/demo.htm

With a little more work you can have the image change to reflect the playing/paused state of the sound.

**mlegg** · 05-15-2014, 10:37 AM

thanks, that is great. another question would be how can I have a different button show as stop (once you hit play)?

**jscheuer1** · 05-15-2014, 03:42 PM

Not much different:

http://home.comcast.net/~jscheuer1/s...wave/demo2.htm

Use 'View Source' to see changes.

But I'm sure you will want more similar looking buttons, the pause button I used was just one I found easy to grab. And you would probably also prefer to use a sprite. If you need help on that, after you've made up the sprite, let me see it. That assumes you know how to make a sprite image (two or more images in one).

**mlegg** · 05-15-2014, 05:45 PM

Thanks John that helped. I made the changes here. The sounds play and show the correct images in Firefox 29.0.1 and also in Internet Explorer 11. In Chrome it does not autoplay, you have to hit the play image. In Safari the sounds do not play and you see the don't play icon.

**jscheuer1** · 05-15-2014, 06:12 PM

Autoplays and shows the images in Safari 5.1.7 and Chrome 34.0.1847.137 m (both under Win 7) here. If it's a hand held touch device, it requires that you initialize play. If it's not a touch device, try updating the browser and/or making sure you're not viewing an older cached copy of the page.

**mlegg** · 05-15-2014, 06:37 PM

OK, I just got a new laptop because the old one died a bad death. I'm running Windows 8.1. I wonder if that's why I'm seeing things differently. Thanks, I appreciate it.

**jscheuer1** · 05-15-2014, 11:51 PM

Win 8 supports touch. Does the new laptop?

**mlegg** · 05-16-2014, 12:00 AM

Yes, I find it useful at times actually on the laptop.

**jscheuer1** · 05-16-2014, 12:47 AM

OK, touch support (but only if also supported and turned on in the browser or at least reported as such by the browser to javascript) means that the sound will start out off and must be turned on by clicking on the icon/button. That's what I tested for here:

Code:

	var playing = !!('ontouchstart' in window) || !!('ontouchstart' in document.documentElement) || !!window.ontouchstart || (!!window.Touch && !!window.Touch.length) || !!window.onmsgesturechange || (window.DocumentTouch && window.document instanceof window.DocumentTouch),

If you prefer you could use a user agent string test for likely hand held browsers, that might be more to the point. The smaller devices do not allow autoplay (requires additional power/cache space) so it's senseless trying to enable it for them in the script code.

Chrome on your system is reporting touch enabled (which it probably is in that browser on that machine) so that's why you have to click to play. IE 11 and FF 29 probably do not have touch, so they do autoplay.

The one thing that surprises me is that you seem to say there's no way to play in Safari on your system. If so, could you confirm that and describe in more detail just what you're seeing and what happens when you click on the icon/button.