├── images
    ├── play.png
    ├── stop.png
    ├── playing.png
    └── stoped.png
├── simpleplayer.css
├── README
├── jquery.simpleplayer.min.js
├── demo.html
└── jquery.simpleplayer.js


/images/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanhao/Simple-Player/HEAD/images/play.png


--------------------------------------------------------------------------------
/images/stop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanhao/Simple-Player/HEAD/images/stop.png


--------------------------------------------------------------------------------
/images/playing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanhao/Simple-Player/HEAD/images/playing.png


--------------------------------------------------------------------------------
/images/stoped.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanhao/Simple-Player/HEAD/images/stoped.png


--------------------------------------------------------------------------------
/simpleplayer.css:
--------------------------------------------------------------------------------
 1 | .simple-player-container {
 2 |     display: inline-block;
 3 |     -webkit-border-radius: 5px;
 4 |     -moz-border-radius: 5px;
 5 |     border-radius: 5px;
 6 | }
 7 | .simple-player-container > div > ul {
 8 |     margin: 0;
 9 |     padding-left: 0;
10 | }
11 | .simpleplayer-play-control {
12 |     background-image: url('images/play.png');
13 |     display: block;
14 |     width: 16px;
15 |     height: 16px;
16 |     bottom: -5px;
17 |     position: relative;
18 | }
19 | .simpleplayer-play-control:hover {
20 |     background-image: url('images/playing.png');
21 | }
22 | .simpleplayer-stop-control {
23 |     background-image: url('images/stop.png');
24 |     display: block;
25 |     width: 16px;
26 |     height: 16px;
27 |     bottom: -5px;
28 |     position: relative;
29 | }
30 | .simpleplayer-stop-control:hover {
31 |     background-image: url('images/stoped.png');
32 | }
33 | 


--------------------------------------------------------------------------------
/README:
--------------------------------------------------------------------------------
 1 | Simple HTML5 Audio Player Demo
 2 | 
 3 | Usage:
 4 | 
 5 | It's a so simple HTML5 audio player. See the source code of this page to learn how to use it. 
 6 | At first you need include simpleplayer.css and jquery.simpleplayer.js. Then initialize the player after document loaded, e.g.: 
 7 | $(".player").player();
 8 | 
 9 | Options:
10 | 
11 | progressbarWidth: the width of the progressbar
12 | progressbarHeight: the height of the progressbar
13 | progressbarColor: color of the progressbar
14 | progressbarBGColor: background color of the progressbar
15 | defaultVolume: volume as default
16 | Style:
17 | 
18 | You can easly use CSS to style up this simple player by change of simpleplayer.css or define it in your CSS files.
19 | 
20 | TODO:
21 | 
22 | Video Support
23 | Volume Adjust
24 | More Control of Media
25 | Theme
26 | A befault html5 & css 3 demo page
27 | ...
28 | Let me know if you like this simple player. @yuanhao


--------------------------------------------------------------------------------
/jquery.simpleplayer.min.js:
--------------------------------------------------------------------------------
1 | (function(a){a.fn.player=function(e){var d={progressbarWidth:"200px",progressbarHeight:"5px",progressbarColor:"#22ccff",progressbarBGColor:"#eeeeee",defaultVolume:0.8};if(e){a.extend(d,e)}var c='<span class="simpleplayer-play-control"></span>';var b='<span class="simpleplayer-stop-control"></span>';this.each(function(){a(this).wrap('<div class="simple-player-container" style="background-color: #ddd; padding: 0 10px 5px 5px;" />').parent().prepend('<div><ul><li style="display: inline-block; padding: 0 5px; "><a style="text-decoration: none;" class="start-button" href="javascript:void(0)">'+c+'</a></li><li class="progressbar-wrapper" style="display: inline-block; cursor: pointer; width:'+d.progressbarWidth+';"><span style="display: block; background-color: '+d.progressbarBGColor+'; width: 100%; "><span class="progressbar" style="display: block; background-color: '+d.progressbarColor+"; height: "+d.progressbarHeight+'; width: 0%; "></span></span></li></ul></div>');var i=a(this).get(0);var h=a(this).parent().find(".start-button");var g=a(this).parent().find(".progressbar-wrapper");var f=a(this).parent().find(".progressbar");i.volume=d.defaultVolume;h.click(function(){if(i.paused){i.play();a(this).find(".simpleplayer-play-control").addClass("simpleplayer-stop-control").removeClass("simpleplayer-play-control")}else{i.pause();a(this).find(".simpleplayer-stop-control").addClass("simpleplayer-play-control").removeClass("simpleplayer-stop-control")}});g.click(function(j){if(i.duration!=0){left=a(this).offset().left;offset=j.pageX-left;percent=offset/g.width();duration_seek=percent*i.duration;i.currentTime=duration_seek}});a(i).bind("ended",function(j){i.pause();h.find(".simpleplayer-stop-control").addClass("simpleplayer-play-control").removeClass("simpleplayer-stop-control");f.css("width","0%")});a(i).bind("timeupdate",function(j){duration=this.duration;time=this.currentTime;fraction=time/duration;percent=fraction*100;if(percent){f.css("width",percent+"%")}});if(i.duration>0){a(this).parent().css("display","inline-block")}});return this}})(jQuery);
2 | 


--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=620">
 6 |     <title>Simple HTML5 Player Demo</title>
 7 |     <link rel="stylesheet" href="simpleplayer.css" type="text/css">
 8 |     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 9 |     <script src="jquery.simpleplayer.js"></script>
10 |     <script type="text/javascript">
11 |         $(document).ready(function() {
12 |             var settings = {
13 |                 progressbarWidth: '200px',
14 |                 progressbarHeight: '5px',
15 |                 progressbarColor: '#22ccff',
16 |                 progressbarBGColor: '#eeeeee',
17 |                 defaultVolume: 0.8
18 |             };
19 |             $(".player").player(settings);
20 |         });
21 |     </script>
22 | </head>
23 | <body>
24 |     <h1>Simple HTML5 Audio Player Demo</h1>
25 |     <div>
26 |         <audio class="player" src="http://upload.wikimedia.org/wikipedia/commons/8/82/Riddle_song.ogg">  
27 |           Your browser does not support the <code>audio</code> element.  
28 |         </audio>
29 |     </div>
30 |     <div>
31 |         <audio class="player" autoplay="autoplay" src="http://upload.wikimedia.org/wikipedia/commons/8/82/Riddle_song.ogg">  
32 |           Your browser does not support the <code>audio</code> element.  
33 |         </audio>
34 |     </div>
35 |     <h3>
36 |         Usage:
37 |     </h3>
38 |     <p>
39 |         It's a so simple HTML5 audio player. See the source code of this page to
40 |         learn how to use it. 
41 |         <br />
42 |         At first you need include <i>simpleplayer.css</i> and <i>jquery.simpleplayer.js</i>.
43 |         Then initialize the player after document loaded, e.g.:
44 |         <br />
45 |         <code>
46 |             $(".player").player();
47 |         </code>
48 |     </p>
49 |     <h3>
50 |         Options:
51 |     </h3>
52 |     <ul>
53 |         <li>progressbarWidth: the width of the progressbar</li>
54 |         <li>progressbarHeight: the height of the progressbar</li>
55 |         <li>progressbarColor: color of the progressbar</li>
56 |         <li>progressbarBGColor: background color of the progressbar</li>
57 |         <li>defaultVolume: volume as default</li>
58 |     </ul>
59 |     <h3>
60 |         Style:
61 |     </h3>
62 |     <p>
63 |         You can easly use CSS to style up this simple player by change of
64 |         simpleplayer.css or define it in your CSS files.
65 |     </p>
66 |     <h3>TODO:</h3>
67 |     <ul>
68 |         <li>Video Support</li>
69 |         <li>Volume Adjust</li>
70 |         <li>More Control of Media</li>
71 |         <li>Theme</li>
72 |         <li>A befault html5 & css 3 demo page</li>
73 |         <li>...</li>
74 |     </ul>
75 |     <h3>Let me know if you like this simple player. <a target="_blank" href="http://twitter.com/yuanhao">@yuanhao</a></h3>
76 | </body>
77 | </html>
78 | 


--------------------------------------------------------------------------------
/jquery.simpleplayer.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * SimplePlayer - A jQuery Plugin
  3 |  * @requires jQuery v1.4.2 or later
  4 |  *
  5 |  * SimplePlayer is a html5 audio player
  6 |  *
  7 |  * Licensed under the MIT:
  8 |  * http://www.opensource.org/licenses/mit-license.php
  9 |  *
 10 |  * Copyright (c) 2010-, Yuanhao Li (jay_21cn -[at]- hotmail [*dot*] com)
 11 |  */
 12 | (function($) {
 13 |     $.fn.player = function(settings) {
 14 |         var config = {
 15 |             progressbarWidth: '200px',
 16 |             progressbarHeight: '5px',
 17 |             progressbarColor: '#22ccff',
 18 |             progressbarBGColor: '#eeeeee',
 19 |             defaultVolume: 0.8
 20 |         };
 21 | 
 22 |         if (settings) {
 23 |             $.extend(config, settings);
 24 |         }
 25 | 
 26 |         var playControl = '<span class="simpleplayer-play-control"></span>';
 27 |         var stopControl = '<span class="simpleplayer-stop-control"></span>';
 28 | 
 29 |         this.each(function() {
 30 |             $(this).before('<div class="simple-player-container" style="background-color: #ddd; padding: 0 10px 5px 5px;">');
 31 |             $(this).after('</div>');
 32 |             $(this).parent().find('.simple-player-container').prepend(
 33 |                 '<div><ul>' + 
 34 |                     '<li style="display: inline-block; padding: 0 5px; "><a style="text-decoration: none;"' +
 35 |                     ' class="start-button" href="javascript:void(0)">' + playControl + '</a></li>' + 
 36 |                     '<li class="progressbar-wrapper" style="display: inline-block; cursor: pointer; width:' + config.progressbarWidth + ';">' + 
 37 |                         '<span style="display: block; background-color: ' + config.progressbarBGColor + '; width: 100%; ">' + 
 38 |                         '<span class="progressbar" style="display: block; background-color: ' + config.progressbarColor +
 39 |                                                          '; height: ' + config.progressbarHeight + '; width: 0%; ">' +
 40 |                         '</span></span>' + 
 41 |                     '</li>' + 
 42 |                 '</ul></div>'
 43 |             );
 44 | 
 45 |             var simplePlayer = $(this).get(0);
 46 |             var button = $(this).parent().find('.start-button');
 47 |             var progressbarWrapper = $(this).parent().find('.progressbar-wrapper');
 48 |             var progressbar = $(this).parent().find('.progressbar');
 49 | 
 50 |             simplePlayer.volume = config.defaultVolume;
 51 | 
 52 |             button.click(function() {
 53 |                 if (simplePlayer.paused) {
 54 |                     /*stop all playing songs*/
 55 |                     $.each($('audio'), function () {
 56 |     					this.pause();
 57 | 						$(this).parent().find('.simpleplayer-stop-control').addClass('simpleplayer-play-control').removeClass('simpleplayer-stop-control');
 58 | 					});
 59 |                     simplePlayer.play();
 60 |                     $(this).find('.simpleplayer-play-control').addClass('simpleplayer-stop-control').removeClass('simpleplayer-play-control');
 61 |                 } else {
 62 |                     simplePlayer.pause();
 63 |                     $(this).find('.simpleplayer-stop-control').addClass('simpleplayer-play-control').removeClass('simpleplayer-stop-control');
 64 |                 }
 65 |             });
 66 | 
 67 |             progressbarWrapper.click(function(e) {
 68 |                 if (simplePlayer.duration != 0) {
 69 |                     left = $(this).offset().left;
 70 |                     offset = e.pageX - left;
 71 |                     percent = offset / progressbarWrapper.width();
 72 |                     duration_seek = percent * simplePlayer.duration;
 73 |                     simplePlayer.currentTime = duration_seek;
 74 |                 }
 75 |             });
 76 | 
 77 | 
 78 |             $(simplePlayer).bind('ended', function(evt) {
 79 |                 simplePlayer.pause();
 80 |                 button.find('.simpleplayer-stop-control').addClass('simpleplayer-play-control').removeClass('simpleplayer-stop-control');
 81 |                 progressbar.css('width', '0%');
 82 |             });
 83 | 
 84 |             $(simplePlayer).bind('timeupdate', function(e) {
 85 |                 duration = this.duration;
 86 |                 time = this.currentTime;
 87 |                 fraction = time / duration;
 88 |                 percent = fraction * 100;
 89 |                 if (percent) progressbar.css('width', percent + '%');
 90 |             });
 91 | 
 92 |             if (simplePlayer.duration > 0) {
 93 |                 $(this).parent().css('display', 'inline-block');
 94 |             }
 95 | 
 96 |             if ($(this).attr('autoplay') == 'autoplay') {
 97 |                 button.click();
 98 |             }
 99 |         });
100 | 
101 |         return this;
102 |     };
103 | })(jQuery);
104 | 


--------------------------------------------------------------------------------