Menu
I feel like I'm taking crazy pills here because I can not figure out how to render the html 5 audio tag with custom controls.
I have this html so far, and it works no problem:
<audio controls preload='none'><source src='the url to the audio' type='audio/wav' /></audio>
How do I get it to display ONLY the play button, and perhaps when playing, show the pause button in it's place.
From what I read,
By default, the element will not expose any sort of player controls. You can create your own controls with plain old HTML, CSS, and JavaScript. The element has methods like play() and pause() and a read/write property called currentTime. There are also read/write volume and muted properties. So you really have everything you need to build your own interface.
If you don’t want to build your own interface, you can tell the browser to display a built-in set of controls. To do this, just include the controls attribute in your tag.
But I can not find any examples of using custom controls. How do you get just the play button?
486
You can create your own controls with plain old HTML, CSS, and JavaScript. The element has methods like play() and pause() and a read/write property called currentTime. There are also read/write volume and muted properties. So you really have everything you need to build your own interface.
HTML5 <audio> Tag. Since the release of HTML5, audios can be added to webpages using the “audio” tag.
Add the CSS Styles . audio-player { --player-button-width: 3em; --sound-button-width: 2em; --space: . 5em; ... } The --sound-button-width will be used for the width of the sound button, and --space will be used to add space between the track and the button.
How to embed audio in HTML? To embed audio in HTML, we use the <audio> tag. Before HTML5, audio cannot be added to web pages in the Internet Explorer era. To play audio, we used web plugins like Flash.
You create your elements like so...
<audio id="yourAudio" preload='none'> <source src='the url to the audio' type='audio/wav' /> </audio> <a href="#" id="audioControl">play!</a> And add some functionality:
var yourAudio = document.getElementById('yourAudio'), ctrl = document.getElementById('audioControl'); ctrl.onclick = function () { // Update the Button var pause = ctrl.innerHTML === 'pause!'; ctrl.innerHTML = pause ? 'play!' : 'pause!'; // Update the Audio var method = pause ? 'pause' : 'play'; yourAudio[method](); // Prevent Default Action return false; }; Right now, the button is just simple text ("play!" or "pause!"), but you could do just about anything you wanted with CSS. Instead of setting the innerHTML, set the className and you're good to go!
191
After a lot of research, I found an easy way of eliminating and manipulating specific parts of the predefined controls.
Create your elements as you usually would, like so:
<audio autoPlay> <source src='audioUrl' type='audio/mpeg' /> </audio> Then in the CSS file, you write the following:
/* Specifies the size of the audio container */ audio { width: 115px; height: 25px; } audio::-webkit-media-controls-panel { -webkit-justify-content: center; height: 25px; } /* Removes the timeline */ audio::-webkit-media-controls-timeline { display: none !important; } /* Removes the time stamp */ audio::-webkit-media-controls-current-time-display { display: none; } audio::-webkit-media-controls-time-remaining-display { display: none; } With this code, you should get a small and nice looking container with only mute-button, pause/play-button and the 'download-file'-tag.
For an overview of all the things you can modify, have a look here.
The following code will also remove the mute- and the play-button:
/* Removes mute-button */ audio::-webkit-media-controls-mute-button { display: none; } /* Removes play-button */ audio::-webkit-media-controls-play-button { display: none; } I have been experimenting with the use of a graphic instead of the player. Set the style within the 'audio' tag to "display: none; width: 0px; height: 0px;" (display none does not work on iPad, thus the additional width-0 and height-0 settings). Also not including the "controls" attribute should work. (different systems/browsers & desktop vs iOS all act differently.....)
Eg:
<head>
<script>
function EvalSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.play();
}
</script>
</head>
<body>
Click the speaker to hear the sound. <a href="javascript:null()" onClick="EvalSound('sound1'); return false;">
<img src="sound_icon.png" alt="" title="sound_icon" width="" height="" class="" /></a>
<audio id="sound1" style="display: none; width: 0px; height: 0px;" src="sound.mp3" controls preload="auto" autobuffer>
</body>
The "javascript:null()" works on iPad in conjunction with "return false;" as opposed to the usual "#".
For more really useful information: http://www.phon.ucl.ac.uk/home/mark/audio/play.htm
23
if you want the built-in play-button only you could:
use autio-tag's class attribute:
<audio controls preload='auto' class="audio_volume_only"><source src='the url to the
audio' type='audio/mp3' /></audio>
and fit the css:
.audio_volume_only {
width: 35px;
}
i hoped controls has some parameters, but not found any or misunderstood .. we'll see.
then possibly use audio's onplay - event to change the css to your need. the play-button will become the pause-button in built-in controls
as others pointed out, you can always make your own....
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
