Featuring stream from a radio station in South Africa
A Pen by Bright Sparks on CodePen.
Created
December 10, 2016 09:59
-
-
Save bright-spark/e46a72d3671617c40e0aed08abfbcf1b to your computer and use it in GitHub Desktop.
MARMITE HTML5 Audio Player
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> | |
| <meta http-equiv="Pragma" content="no-cache" /> | |
| <meta http-equiv="Expires" content="0" /> | |
| <title>Stainless HTML5 Audio Player</title> | |
| <link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/theboxfeed" /> | |
| <meta id="Viewport" name="viewport" width="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> | |
| <script type="text/javascript"> | |
| $(function(){ | |
| if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) { | |
| var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width | |
| var mw = 480; // min width of site | |
| var ratio = ww / mw; //calculate ratio | |
| if( ww < mw){ //smaller than minimum size | |
| $('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + ww); | |
| }else{ //regular size | |
| $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww); | |
| } | |
| } | |
| }); | |
| </script> | |
| </head> | |
| <body id="stainless" class="default"> | |
| <div id="wrapper"> | |
| <section id="listen"> | |
| <p class="photo"> | |
| <img src="http://ii.worldmarket.com/fcgi-bin/iipsrv.fcgi?FIF=/images/worldmarket/source/14754_XXX_v1.tif&wid=2000&cvt=jpeg alt=" martin myburgh " /><center><br><br><br<h1>HTML5 AUDIO PLAYER FEATURING STREAM FROM A RADIO STATION IN SOUTH AFRICA</h1></center></p> | |
| </section> | |
| <footer> | |
| <p>Constructed by Martin Myburgh</p> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function() { | |
| $("body").addClass("listen"); | |
| $("#nav-listen a").click(showListen); | |
| $("#nav-archive a").click(showArchive); | |
| $("#nav-info a").click(showInfo); | |
| $("#nav-rss a[href='#rss']").click(toggleRSS); | |
| initAudio(); | |
| addPopupLink(); | |
| $("a.popup").popupWindow({height:150, width:400}); | |
| }); | |
| function showListen() { | |
| $("body").removeClass("archive"); | |
| $("body").removeClass("info"); | |
| $("body").addClass("listen"); | |
| return false; | |
| } | |
| function showArchive() { | |
| $("body").removeClass("listen"); | |
| $("body").removeClass("info"); | |
| $("body").addClass("archive"); | |
| return false; | |
| } | |
| function showInfo() { | |
| $("body").removeClass("listen"); | |
| $("body").removeClass("archive"); | |
| $("body").addClass("info"); | |
| return false; | |
| } | |
| function toggleRSS() { | |
| $("#nav-rss").toggleClass("open"); | |
| return false; | |
| } | |
| function addPopupLink() { | |
| var episodeID = $('body')[0].id; | |
| $(".default .player").append("<a class='popup' href='http://jacarandafm.com'>Popup</a>"); | |
| } | |
| function initAudio() { | |
| var supportsAudio = !!document.createElement('audio').canPlayType, | |
| audio, | |
| loadingIndicator, | |
| positionIndicator, | |
| timeleft, | |
| loaded = false, | |
| manualSeek = false; | |
| if (supportsAudio) { | |
| var episodeTitle = $('body')[0].id; | |
| var player = '<p class="player">\ | |
| <span id="playtoggle" />\ | |
| \ | |
| <span id="loading" />\ | |
| \ | |
| </span>\ | |
| \ | |
| <audio preload="metadata">\ | |
| <source src="http://jacaranda-za.antfarm.co.za:1935/jac-pri/jac-pri.stream/playlist.m3u8" type="audio/ogg"></source>\ | |
| <source src="http://46.4.25.213:8058/;audio.mp3" type="audio/mpeg"></source>\ | |
| <source src="http://46.4.25.213:8058/;audio.mp3" type="audio/x-wav"></source>\ | |
| </audio>\ | |
| </p>'; | |
| $(player).insertAfter("#listen .photo"); | |
| audio = $('.player audio').get(0); | |
| loadingIndicator = $('.player #loading'); | |
| positionIndicator = $('.player #handle'); | |
| timeleft = $('.player #timeleft'); | |
| if ((audio.buffered != undefined) && (audio.buffered.length != 0)) { | |
| $(audio).bind('progress', function() { | |
| var loaded = parseInt(((audio.buffered.end(0) / audio.duration) * 100), 10); | |
| loadingIndicator.css({width: loaded + '%'}); | |
| }); | |
| } | |
| else { | |
| loadingIndicator.remove(); | |
| } | |
| $(audio).bind('timeupdate', function() { | |
| var rem = parseInt(audio.duration - audio.currentTime, 10), | |
| pos = (audio.currentTime / audio.duration) * 100, | |
| mins = Math.floor(rem/60,10), | |
| secs = rem - mins*60; | |
| timeleft.text('-' + mins + ':' + (secs < 10 ? '0' + secs : secs)); | |
| if (!manualSeek) { positionIndicator.css({left: pos + '%'}); } | |
| if (!loaded) { | |
| loaded = true; | |
| $('.player #gutter').slider({ | |
| value: 0, | |
| step: 0.01, | |
| orientation: "horizontal", | |
| range: "min", | |
| max: audio.duration, | |
| animate: true, | |
| slide: function(){ | |
| manualSeek = true; | |
| }, | |
| stop:function(e,ui){ | |
| manualSeek = false; | |
| audio.currentTime = ui.value; | |
| } | |
| }); | |
| } | |
| }).bind('play',function(){ | |
| $("#playtoggle").addClass('playing'); | |
| }).bind('pause ended', function() { | |
| $("#playtoggle").removeClass('playing'); | |
| }); | |
| $("#playtoggle").click(function() { | |
| if (audio.paused) { audio.play(); } | |
| else { audio.pause(); } | |
| }); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="//thebox.maxvoltar.com/assets/js/jquery.popupWindow.js"></script> | |
| <script src="//maxvoltar.com/mint/?js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function() { | |
| $("body").addClass("listen"); | |
| $("#nav-listen a").click(showListen); | |
| $("#nav-archive a").click(showArchive); | |
| $("#nav-info a").click(showInfo); | |
| $("#nav-rss a[href='#rss']").click(toggleRSS); | |
| initAudio(); | |
| addPopupLink(); | |
| $("a.popup").popupWindow({height:150, width:400}); | |
| }); | |
| function showListen() { | |
| $("body").removeClass("archive"); | |
| $("body").removeClass("info"); | |
| $("body").addClass("listen"); | |
| return false; | |
| } | |
| function showArchive() { | |
| $("body").removeClass("listen"); | |
| $("body").removeClass("info"); | |
| $("body").addClass("archive"); | |
| return false; | |
| } | |
| function showInfo() { | |
| $("body").removeClass("listen"); | |
| $("body").removeClass("archive"); | |
| $("body").addClass("info"); | |
| return false; | |
| } | |
| function toggleRSS() { | |
| $("#nav-rss").toggleClass("open"); | |
| return false; | |
| } | |
| function addPopupLink() { | |
| var episodeID = $('body')[0].id; | |
| $(".default .player").append("<a class='popup' href='http://thebox.maxvoltar.com/" + episodeID + "?audio'>Popup</a>"); | |
| } | |
| function initAudio() { | |
| var supportsAudio = !!document.createElement('audio').canPlayType, | |
| audio, | |
| loadingIndicator, | |
| positionIndicator, | |
| timeleft, | |
| loaded = false, | |
| manualSeek = false; | |
| if (supportsAudio) { | |
| var episodeTitle = $('body')[0].id; | |
| var player = '<p class="player">\ | |
| <span id="playtoggle" />\ | |
| <span id="gutter">\ | |
| <span id="loading" />\ | |
| <span id="handle" class="ui-slider-handle" />\ | |
| </span>\ | |
| <span id="timeleft" />\ | |
| <audio preload="metadata">\ | |
| <source src="http://maxvoltar.s3.amazonaws.com/thebox/' + episodeTitle + '.ogg" type="audio/ogg"></source>\ | |
| <source src="http://maxvoltar.s3.amazonaws.com/thebox/' + episodeTitle + '.mp3" type="audio/mpeg"></source>\ | |
| <source src="http://maxvoltar.s3.amazonaws.com/thebox/' + episodeTitle + '.wav" type="audio/x-wav"></source>\ | |
| </audio>\ | |
| </p>'; | |
| $(player).insertAfter("#listen .photo"); | |
| audio = $('.player audio').get(0); | |
| loadingIndicator = $('.player #loading'); | |
| positionIndicator = $('.player #handle'); | |
| timeleft = $('.player #timeleft'); | |
| if ((audio.buffered != undefined) && (audio.buffered.length != 0)) { | |
| $(audio).bind('progress', function() { | |
| var loaded = parseInt(((audio.buffered.end(0) / audio.duration) * 100), 10); | |
| loadingIndicator.css({width: loaded + '%'}); | |
| }); | |
| } | |
| else { | |
| loadingIndicator.remove(); | |
| } | |
| $(audio).bind('timeupdate', function() { | |
| var rem = parseInt(audio.duration - audio.currentTime, 10), | |
| pos = (audio.currentTime / audio.duration) * 100, | |
| mins = Math.floor(rem/60,10), | |
| secs = rem - mins*60; | |
| timeleft.text('-' + mins + ':' + (secs < 10 ? '0' + secs : secs)); | |
| if (!manualSeek) { positionIndicator.css({left: pos + '%'}); } | |
| if (!loaded) { | |
| loaded = true; | |
| $('.player #gutter').slider({ | |
| value: 0, | |
| step: 0.01, | |
| orientation: "horizontal", | |
| range: "min", | |
| max: audio.duration, | |
| animate: true, | |
| slide: function(){ | |
| manualSeek = true; | |
| }, | |
| stop:function(e,ui){ | |
| manualSeek = false; | |
| audio.currentTime = ui.value; | |
| } | |
| }); | |
| } | |
| }).bind('play',function(){ | |
| $("#playtoggle").addClass('playing'); | |
| }).bind('pause ended', function() { | |
| $("#playtoggle").removeClass('playing'); | |
| }); | |
| $("#playtoggle").click(function() { | |
| if (audio.paused) { audio.play(); } | |
| else { audio.pause(); } | |
| }); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="http://thebox.maxvoltar.com/assets/css/master.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment