CODEWITHSUNDEEP
htmlaudio
lunar
lunar

Reputation: 1232

Customisation of audio tag

I am trying to customise audio tag in HTML5. To play around with controls is easy but is there a way to show and customise the progress bar of the track and volume controller?

Upvotes: 0

Views: 786

Answers (2)

vdbuilder
vdbuilder

Reputation: 12974

Here's an example of javascript controlled audio player that uses css stylable elems:

<!doctype html>
<html lang="en">
    <head>
       <style>
            html, body {padding:50px;}
            * {margin:0px;padding:0px;}
            #audioWrapper {position:relative;display:inline-block;}
            .audioPlayer {position:absolute;left:0px;bottom:0px;
                 display: block;height:48px;width:400px;}
            #playPauseButton {position: absolute;top: 13px;left: 10px;
                 display:inline;width: 18px;height: 22px;
                 background: url(/images/player.png) no-repeat -20px -2px;
                 cursor: pointer;}
            #playPauseButton.playing {background-position:0px -2px;}
            #playPauseButton:active {top:10px;}
            #timeRemaining {position:absolute;top:17px;right:5px;font-size:11px;
                 font-weight:bold;color:#fff;}
            #timeLine {position: absolute;top: 19px;left: 50px;right: 50px;
                 height: 6px;padding: 2px;border-radius: 5px;background: #546374;}
           #slideHandle {position: absolute;top: -6px;left: 0;width: 20px;
                height: 20px;margin-left: -10px;
                background: url(/images/player.png) no-repeat -39px -3px;
                cursor: pointer;}
           .audioPlayerBackground {height:400px;width:400px;}
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="/js/jquery-ui-1.8.17.custom.min.js"></script>
        <script type="text/javascript">
            function setupAudio(){
                var userSetSliderPosition = false;
                var audioSliderCreated = false;

                if(!!document.createElement('audio').canPlayType) {
                    var audioElemStr = '<audio><source src="/sound/Mozart_-_Bassoon_Concerto_in_Bb_major_-_Allegro.ogg" type="audio/ogg"></source></audio>';
                    $(audioElemStr).insertAfter(".audioPlayer #timeRemaining");

                    audioPlayer = $('.audioPlayer audio').get(0);
                    slideHandle = $('.audioPlayer #slideHandle');
                    timeRemainingElem = $('.audioPlayer #timeRemaining');

                    $("#playPauseButton").click(function() {    
                        if (audioPlayer.paused) { audioPlayer.play(); }
                        else { audioPlayer.pause(); }    
                    });

                    $(audioPlayer).bind('play',function() {
                        $("#playPauseButton").addClass('playing');  
                      }).bind('pause ended', function() {
                        $("#playPauseButton").removeClass('playing');   
                    });  

                    $(audioPlayer).bind('timeupdate', function() {
                        var audioPlayerDuration = audioPlayer.duration;

                        if (!userSetSliderPosition){
                            var audioPlayerCurrentTime = audioPlayer.currentTime;
                            var audioPlayerRemainingTime  = parseInt(audioPlayerDuration - audioPlayerCurrentTime);
                            var slideHandlePercentComplete = (audioPlayerCurrentTime / audioPlayerDuration) * 100;
                            var minutes = parseInt(audioPlayerRemainingTime/60);
                            var seconds = parseInt(audioPlayerRemainingTime%60);

                            slideHandle.css({left: slideHandlePercentComplete + '%'}); 
                            timeRemainingElem.text(minutes + ':' + (seconds < 10 ? ('0' + seconds) : seconds));
                        }

                        if (!audioSliderCreated) {
                            audioSliderCreated = true;
                            $('.audioPlayer #timeLine').slider({
                                max: audioPlayerDuration,
                                step: 0.01,
                                animate: "slow",         
                                slide: function() {            
                                    userSetSliderPosition = true;
                                },
                                stop:function(e,ui) {
                                    userSetSliderPosition = false;        
                                    audioPlayer.currentTime = ui.value;
                                }
                            });
                        }
                    });
                }
            }
        </script>
    </head>
    <body onload="setupAudio();">
        <div id="audioWrapper">
            <img class="audioPlayerBackground" alt="" src="/images/spaceJunk.png" />
            <div class="audioPlayer">
                <div id="playPauseButton"></div>
                <div id="timeLine">
                    <div id="slideHandle" class ="ui-slider-handle"></div>
                </div>
                <div id="timeRemaining"></div>
                <!--audio and source tags will be inserted here, if the browser supports them-->
            </div>
        </div>
    </body>
</html>

You can see an example of it running here: http://www.vdstudios.net/tutorials/html/stylableAudioPlayer.html

Upvotes: 1

Brad
Brad

Reputation: 163232

I'd recommend playing the audio in the background, control it with your own custom built interface via JavaScript.

Upvotes: 0

Related Questions