Friday, June 25, 2010

Simple Player - A very simple HTML5 audio player plugin for jQuery

What is Simple Player

Simple Player is a jQuery plugin that allows web developers to control audio files on their webpage. Supports style up via CSS. All browsers that supports HTML5 audio tag that allow mp3 or ogg format supported by this plugin.



I wrote this simple player plugin to replace the traditional flash player. There is no need to use flash (load flash plugin consumes much more memory extra) in some cases if you want to play a simple audio file.

Usage

The jquery.simpleplayer.min.js file should be added to the head section of the HTML file after the jQuery JavaScript file. Below is how to include the JavaScript file using an absolute path, relative to the server root.

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="/jquery.simpleplayer.min.js"></script>
</head>


Then you should include the simpleplayer.css into your html.

<link rel="stylesheet" href="simpleplayer.css" type="text/css">


The audio tag in your code looks like:

<audio class="player" src="path_to_your_audio_file">  
  Your browser does not support the <code>audio</code> element.  
</audio>


Final step we need some javascript to load our simple player

<script type="text/javascript">
    $(document).ready(function() {
        var settings = {
            progressbarWidth: '200px',
            progressbarHeight: '5px',
            progressbarColor: '#22ccff',
            progressbarBGColor: '#eeeeee',
            defaultVolume: 0.8
        };
        $(".player").player(settings);
    });
</script>


Simple Player Options

  • progressbarWidth: the width of the progressbar
  • progressbarHeight: the height of the progressbar
  • progressbarColor: color of the progressbar
  • progressbarBGColor: background color of the progressbar
  • defaultVolume: volume as default

Latest Release


Collaborate


TODO List:

  • Video Support
  • Volume Adjust
  • More Control of Media
  • Theme
  • A befault html5 & css 3 demo page
  • ...

Simple Player jQuery Plugin Licensed under the MIT


Enjoy. Let me know if you like this simple player. @yuanhao

219 comments:

«Oldest   ‹Older   201 – 219 of 219
Abhishek said...
This comment has been removed by the author.
Abhishek said...
This comment has been removed by the author.
Suhani Arora said...
This comment has been removed by the author.
Abhishek said...

Thanks for posting such blogs , if you are looking for Education Loan you can also visit TrueBalance.

Deepak said...

Thank you very much for sharing this fantastic blog. Your website is pretty good and it has been of great use to us. If you are seeking for instant loan app you can visit us.

Deepak said...

Thank you very much for sharing this fantastic blog. Your website is pretty good and it has been of great use to us. If you are seeking for quick loan app you can visit us.

Thoughtworks said...

Thanks for sharing such an amazing article, I just love to read your articles, keep sharing. Thoughtworks Provide Operating model services.

Thoughtworks said...


Thanks for sharing such an amazing article, I just love to read your articles, keep sharing. Thoughtworks Provide product design.

KIRTIGOHAR said...

Thanks for sharing such an amazing article, I just love to read your articles, keep sharing. Thoughtworks, decision science services aims to provide a systematic framework for analyzing and evaluating decisions by considering various factors, potential outcomes, and associated risks. Must Visit- Thoughtworks

Deepak said...

Thanks for sharing such an amazing article, if you are looking for instant personal loan app Visit - Truebalance

A-Man World said...

Thanks For This Beautiful Article And So Much Really Great Info About This, APPRECIATE IT. if you guys looking for Quick Loan App you can visit Truebalance.

Priti Mahajan said...

Book Me for this night for full Night Entertainment

Essentias Hoodie said...

Essentials Hoodie is Official Fear Of God Essentials Clothing Website. Get Latest Essentials® Collection On Our Store.

Essentias Hoodie

Ukwritings said...

ovo nfl varsity jacket

Thanks a lot for the helpful information you shared in this excellent blog article.

Thoughtworks said...

Your blog has given me so many ideas. I greatly appreciate it. Thanks for sharing engineering productivity . For more information must visit- Thoughtworks

Thoughtworks said...

Such an amazing post. I love your blogs, keep sharing, If you are looking for a digital transformation services .Must Visit- Thoughtworks

Aagam jain said...

Thanks for posting such blogs , if you are looking for small credit loan you can also visit Stashfin.

Global Assignment Expert said...

Thank you for sharing this informative blog post.
If you need top-notch online assignment help at the best price around, look no further than Global Assignment Expert. Our online assignment writing service offers industry-leading prices that are up to 35% lower than competitors while still delivering plagiarism-free, A+ work. Our expert writers have helped thousands of students just like you tackle all types of assignments—from essays and reports to research papers, case studies, and more. We understand the pressure of looming deadlines and strive to deliver your assignment ahead of schedule so you can review it, request any revisions, and submit with confidence. With our clever, playful approach and focus on conveying real benefits to busy students, we've become a go-to resource for those seeking the highest-quality, most affordable online assignment help.

Stefen Sparrow said...

Discover seamless connectivity and unparalleled efficiency with the best IoT software service in Vaishali Nagar, Jaipur, offered by Blockverse Infotech Solutions. Experience innovative solutions tailored for your unique needs, revolutionizing the way you interact with the digital world. Dive into the future of technology with our cutting-edge IoT services, ensuring your devices work harmoniously, making life smarter and more convenient. Visit our website to explore the limitless possibilities that await you.

«Oldest ‹Older   201 – 219 of 219   Newer› Newest»