View Full Version : change mp3 player to button only
mlegg
05-15-2014, 12:22 AM
Hi, On a site (http://hamptonsunrise.com/) I will be uploading I need to have a background sound per the customer. I am using this code (in HTML5)
<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.
5455
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:
<!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/side/demos/tidbits/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/side/demos/tidbits/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 (http://hamptonsunrise.com/). 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:
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.
mlegg
05-16-2014, 12:54 AM
this is a screen shot from my Safari
http://i57.tinypic.com/2ufxeyt.jpg
you only see that 5459 png icon and nothing happens at all when you click on it
jscheuer1
05-16-2014, 01:15 AM
How about if you click on it a second time?
mlegg
05-16-2014, 12:40 PM
Nothing happens, I only see Pause in a balloon style tip.
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.