├── CHANGELOG.md ├── README.md ├── css └── style.css ├── images ├── Thumbs.db ├── bg.png ├── covers │ ├── Thumbs.db │ └── cover1.jpg ├── knob.png ├── next.png ├── pause.png ├── play.png ├── prev.png ├── progress.png ├── progress_bg.png └── stop.png ├── index.html ├── js ├── jquery.js └── main.js └── media ├── README.txt └── Thumbs.db /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### 1.0 / 09-10-2014 - 09-25-2014### 2 | 3 | **Development** 4 | 5 | * Created design elements (buttons, gradients, etc) 6 | * Created HTML5 structure/content 7 | * Styled HTML using CSS 8 | * Created initializer function to load tracks and info 9 | * Play functionality using audio.play 10 | * Pause functionality using audio.pause 11 | * Duration functionality 12 | * Change track next and prev -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML5 Audio Player # 2 | 3 | **HTML5 Audio Player** uses the HTML5 audio API to create playlists and play, pause and skip through tracks. 4 | 5 | 6 | ## Version ## 7 | **1.0** 8 | 9 | ## Demo ## 10 | To view a live demo, please go to - [http://codedemos.com/html5/html5audioplayer](http://www.codedemos.com/html5/html5audioplayer) 11 | 12 | 13 | ##Installation## 14 | Simply upload the files to your web server 15 | 16 | ## Vendors ## 17 | **HTML5 Audio Player** uses a number of open source projects 18 | 19 | * JQuery 1.11.1 - [http://jquery.com](www.kquery.com) 20 | 21 | 22 | ##Supported Browsers## 23 | * Chrome (stable and canary channel) 24 | * Firefox 25 | * IE 9 and 10 26 | * Opera 27 | * Safari 28 | 29 | ##License## 30 | GNU/GPL 31 | 32 | ##Support## 33 | If you are having issues getting this software to work, you can email support@codeskillet.com 34 | 35 | ##Authors## 36 | Brad Traversy 37 | 38 | * [http://twitter.com/bradtraversy](http://twitter.com/bradtraversy) 39 | * [http://www.linkedin.com/in/bradtraversy](http://www.linkedin.com/in/bradtraversy) -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | border: none; 5 | outline: none; 6 | } 7 | 8 | body{ 9 | font-family:arial; 10 | font-size:13px; 11 | line-height:1.5em; 12 | color:#fff; 13 | background: url(../images/bg.png); 14 | } 15 | 16 | .clearfix{ 17 | clear:both; 18 | } 19 | 20 | #container{ 21 | width:330px; 22 | min-height:400px; 23 | background:#333; 24 | overflow:auto; 25 | margin:60px auto; 26 | -moz-border-radius:10px; 27 | -webkit-border-radius:10px; 28 | border-radius:10px; 29 | border:#666 solid 2px; 30 | } 31 | 32 | #audio-image{ 33 | position:relative; 34 | overflow:hidden; 35 | height:200px; 36 | margin-bottom:15px; 37 | } 38 | 39 | #audio-info{ 40 | text-align:center; 41 | } 42 | 43 | #audio-info .artist{ 44 | font-weight:bold; 45 | } 46 | 47 | .cover{ 48 | width:100%; 49 | z-index:1; 50 | } 51 | 52 | input#volume { 53 | width:95%; 54 | margin-left:2%; 55 | -webkit-appearance: none !important; 56 | background:#ccc; 57 | height:1px; 58 | margin-bottom:20px; 59 | } 60 | input#volume::-webkit-slider-thumb { 61 | -webkit-appearance: none !important; 62 | background:url(../images/knob.png) no-repeat; 63 | height:12px; 64 | width:12px; 65 | } 66 | 67 | #buttons{ 68 | width:90%; 69 | display: block; 70 | margin: 15px auto; 71 | margin-left:23px; 72 | overflow:auto; 73 | } 74 | 75 | 76 | button#play{ 77 | width:70px; 78 | height:70px; 79 | background:url(../images/play.png) no-repeat;float:left; 80 | } 81 | 82 | button#pause{ 83 | width:70px; 84 | height:70px; 85 | background:url(../images/pause.png) no-repeat;float:left; 86 | } 87 | 88 | button#stop{ 89 | width:70px; 90 | height:70px; 91 | background:url(../images/stop.png) no-repeat;float:left; 92 | } 93 | 94 | button#prev{ 95 | width:70px; 96 | height:70px; 97 | background:url(../images/prev.png) no-repeat; 98 | float:left; 99 | margin-top:15px; 100 | } 101 | 102 | button#next{ 103 | width:70px; 104 | height:70px; 105 | background:url(../images/next.png) no-repeat; 106 | float:right; 107 | margin-top:15px; 108 | } 109 | 110 | #playlist { 111 | list-style-type: none; 112 | padding:10px; 113 | } 114 | 115 | #playlist li { 116 | cursor: pointer; 117 | margin:5px; 118 | } 119 | 120 | #tracker{ 121 | position:relative; 122 | width:100%; 123 | } 124 | 125 | #playlist li.active { 126 | font-weight: bold; 127 | padding:3px; 128 | background:#666; 129 | } 130 | 131 | #progressBar { 132 | width:80%; 133 | margin-left:2%; 134 | margin-bottom:20px; 135 | margin-top:9px; 136 | height:10px; 137 | background:url(../images/progress_bg.png) no-repeat; 138 | float:left; 139 | } 140 | 141 | #progress { 142 | background:url(../images/progress.png) no-repeat; 143 | height:10px; 144 | display:inline-block; 145 | } 146 | 147 | #duration{ 148 | position:absolute; 149 | top:0; 150 | right:10px; 151 | padding:4px 8px; 152 | background:#000; 153 | border-radius:5px; 154 | } 155 | 156 | -------------------------------------------------------------------------------- /images/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/html5audioplayer/0a7ba60ef1bdb7d86ce205fac74c1435a2894c34/images/Thumbs.db -------------------------------------------------------------------------------- /images/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/html5audioplayer/0a7ba60ef1bdb7d86ce205fac74c1435a2894c34/images/bg.png -------------------------------------------------------------------------------- /images/covers/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/html5audioplayer/0a7ba60ef1bdb7d86ce205fac74c1435a2894c34/images/covers/Thumbs.db -------------------------------------------------------------------------------- /images/covers/cover1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/html5audioplayer/0a7ba60ef1bdb7d86ce205fac74c1435a2894c34/images/covers/cover1.jpg -------------------------------------------------------------------------------- /images/knob.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/html5audioplayer/0a7ba60ef1bdb7d86ce205fac74c1435a2894c34/images/knob.png -------------------------------------------------------------------------------- /images/next.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/html5audioplayer/0a7ba60ef1bdb7d86ce205fac74c1435a2894c34/images/next.png -------------------------------------------------------------------------------- /images/pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/html5audioplayer/0a7ba60ef1bdb7d86ce205fac74c1435a2894c34/images/pause.png -------------------------------------------------------------------------------- /images/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/html5audioplayer/0a7ba60ef1bdb7d86ce205fac74c1435a2894c34/images/play.png -------------------------------------------------------------------------------- /images/prev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/html5audioplayer/0a7ba60ef1bdb7d86ce205fac74c1435a2894c34/images/prev.png -------------------------------------------------------------------------------- /images/progress.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/html5audioplayer/0a7ba60ef1bdb7d86ce205fac74c1435a2894c34/images/progress.png -------------------------------------------------------------------------------- /images/progress_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/html5audioplayer/0a7ba60ef1bdb7d86ce205fac74c1435a2894c34/images/progress_bg.png -------------------------------------------------------------------------------- /images/stop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/html5audioplayer/0a7ba60ef1bdb7d86ce205fac74c1435a2894c34/images/stop.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | HTML5 Audio Player 4 | 5 | 6 | 7 |
8 |
9 | 10 |
11 |
12 |
13 | - 14 |
15 | 16 |
17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 |
28 |
29 | 30 |
31 | 32 |
33 |
34 | 48 |
49 | 50 |
51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | var audio; 2 | 3 | //Hide Pause Initially 4 | $('#pause').hide(); 5 | 6 | //Initializer - Play First Song 7 | initAudio($('#playlist li:first-child')); 8 | 9 | function initAudio(element){ 10 | var song = element.attr('song'); 11 | var title = element.text(); 12 | var cover = element.attr('cover'); 13 | var artist = element.attr('artist'); 14 | 15 | //Create a New Audio Object 16 | audio = new Audio('media/' + song); 17 | 18 | if(!audio.currentTime){ 19 | $('#duration').html('0.00'); 20 | } 21 | 22 | $('#audio-player .title').text(title); 23 | $('#audio-player .artist').text(artist); 24 | 25 | //Insert Cover Image 26 | $('img.cover').attr('src','images/covers/' + cover); 27 | 28 | $('#playlist li').removeClass('active'); 29 | element.addClass('active'); 30 | } 31 | 32 | 33 | //Play Button 34 | $('#play').click(function(){ 35 | audio.play(); 36 | $('#play').hide(); 37 | $('#pause').show(); 38 | $('#duration').fadeIn(400); 39 | showDuration(); 40 | }); 41 | 42 | //Pause Button 43 | $('#pause').click(function(){ 44 | audio.pause(); 45 | $('#pause').hide(); 46 | $('#play').show(); 47 | }); 48 | 49 | //Stop Button 50 | $('#stop').click(function(){ 51 | audio.pause(); 52 | audio.currentTime = 0; 53 | $('#pause').hide(); 54 | $('#play').show(); 55 | $('#duration').fadeOut(400); 56 | }); 57 | 58 | //Next Button 59 | $('#next').click(function(){ 60 | audio.pause(); 61 | var next = $('#playlist li.active').next(); 62 | if (next.length == 0) { 63 | next = $('#playlist li:first-child'); 64 | } 65 | initAudio(next); 66 | audio.play(); 67 | showDuration(); 68 | }); 69 | 70 | //Prev Button 71 | $('#prev').click(function(){ 72 | audio.pause(); 73 | var prev = $('#playlist li.active').prev(); 74 | if (prev.length == 0) { 75 | prev = $('#playlist li:last-child'); 76 | } 77 | initAudio(prev); 78 | audio.play(); 79 | showDuration(); 80 | }); 81 | 82 | //Playlist Song Click 83 | $('#playlist li').click(function () { 84 | audio.pause(); 85 | initAudio($(this)); 86 | $('#play').hide(); 87 | $('#pause').show(); 88 | $('#duration').fadeIn(400); 89 | audio.play(); 90 | showDuration(); 91 | }); 92 | 93 | //Volume Control 94 | $('#volume').change(function(){ 95 | audio.volume = parseFloat(this.value / 10); 96 | }); 97 | 98 | //Time Duration 99 | function showDuration(){ 100 | $(audio).bind('timeupdate', function(){ 101 | //Get hours and minutes 102 | var s = parseInt(audio.currentTime % 60); 103 | var m = parseInt((audio.currentTime / 60) % 60); 104 | //Add 0 if seconds less than 10 105 | if (s < 10) { 106 | s = '0' + s; 107 | } 108 | $('#duration').html(m + '.' + s); 109 | var value = 0; 110 | if (audio.currentTime > 0) { 111 | value = Math.floor((100 / audio.duration) * audio.currentTime); 112 | } 113 | $('#progress').css('width',value+'%'); 114 | }); 115 | } -------------------------------------------------------------------------------- /media/README.txt: -------------------------------------------------------------------------------- 1 | I have removed the music from the package due to slow download and copyright issues. Please use your own music --thanks! -------------------------------------------------------------------------------- /media/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/html5audioplayer/0a7ba60ef1bdb7d86ce205fac74c1435a2894c34/media/Thumbs.db --------------------------------------------------------------------------------