HTML 5 Audio Player

-

Simple Player is a jQuery plugin that allows users to control audio files on their webpage. All browsers that supports HTML5 audio tag that allow mp3 or ogg format supported by this plugin. 

 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


Source code:

jquery.simpleplayer.js


/*
 * SimplePlayer - A jQuery Plugin
 * @requires jQuery v1.4.2 or later
 *
 * SimplePlayer is a html5 audio player
 *
 * Licensed under the MIT:
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Copyright (c) 2010-, Yuanhao Li (jay_21cn -[at]- hotmail [*dot*] com)
 */
(function($) {
    $.fn.player = function(settings) {
        var config = {
            progressbarWidth: '200px',
            progressbarHeight: '5px',
            progressbarColor: '#22ccff',
            progressbarBGColor: '#eeeeee',
            defaultVolume: 0.8
        };

        if (settings) {
            $.extend(config, settings);
        }

        var playControl = '<span class="simpleplayer-play-control"></span>';
        var stopControl = '<span class="simpleplayer-stop-control"></span>';

        this.each(function() {
            $(this).before('<div class="simple-player-container" style="background-color: #ddd; padding: 0 10px 5px 5px;">');
            $(this).after('</div>');
            $(this).parent().find('.simple-player-container').prepend(
                '<div><ul>' + 
                    '<li style="display: inline-block; padding: 0 5px; "><a style="text-decoration: none;"' +
                    ' class="start-button" href="javascript:void(0)">' + playControl + '</a></li>' + 
                    '<li class="progressbar-wrapper" style="display: inline-block; cursor: pointer; width:' + config.progressbarWidth + ';">' + 
                        '<span style="display: block; background-color: ' + config.progressbarBGColor + '; width: 100%; ">' + 
                        '<span class="progressbar" style="display: block; background-color: ' + config.progressbarColor +
                                                         '; height: ' + config.progressbarHeight + '; width: 0%; ">' +
                        '</span></span>' + 
                    '</li>' + 
                '</ul></div>'
            );

            var simplePlayer = $(this).get(0);
            var button = $(this).parent().find('.start-button');
            var progressbarWrapper = $(this).parent().find('.progressbar-wrapper');
            var progressbar = $(this).parent().find('.progressbar');

            simplePlayer.volume = config.defaultVolume;

            button.click(function() {
                if (simplePlayer.paused) {
                    /*stop all playing songs*/
                    $.each($('audio'), function () {
    this.pause();
$(this).parent().find('.simpleplayer-stop-control').addClass('simpleplayer-play-control').removeClass('simpleplayer-stop-control');
});
                    simplePlayer.play();
                    $(this).find('.simpleplayer-play-control').addClass('simpleplayer-stop-control').removeClass('simpleplayer-play-control');
                } else {
                    simplePlayer.pause();
                    $(this).find('.simpleplayer-stop-control').addClass('simpleplayer-play-control').removeClass('simpleplayer-stop-control');
                }
            });

            progressbarWrapper.click(function(e) {
                if (simplePlayer.duration != 0) {
                    left = $(this).offset().left;
                    offset = e.pageX - left;
                    percent = offset / progressbarWrapper.width();
                    duration_seek = percent * simplePlayer.duration;
                    simplePlayer.currentTime = duration_seek;
                }
            });


            $(simplePlayer).bind('ended', function(evt) {
                simplePlayer.pause();
                button.find('.simpleplayer-stop-control').addClass('simpleplayer-play-control').removeClass('simpleplayer-stop-control');
                progressbar.css('width', '0%');
            });

            $(simplePlayer).bind('timeupdate', function(e) {
                duration = this.duration;
                time = this.currentTime;
                fraction = time / duration;
                percent = fraction * 100;
                if (percent) progressbar.css('width', percent + '%');
            });

            if (simplePlayer.duration > 0) {
                $(this).parent().css('display', 'inline-block');
            }

            if ($(this).attr('autoplay') == 'autoplay') {
                button.click();
            }
        });

        return this;
    };
})(jQuery);


simpleplayer.css

.simple-player-container {
    display: inline-block;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.simple-player-container > div > ul {
    margin: 0;
    padding-left: 0;
}
.simpleplayer-play-control {
    background-image: url('images/play.png');
    display: block;
    width: 16px;
    height: 16px;
    bottom: -5px;
    position: relative;
}
.simpleplayer-play-control:hover {
    background-image: url('images/playing.png');
}
.simpleplayer-stop-control {
    background-image: url('images/stop.png');
    display: block;
    width: 16px;
    height: 16px;
    bottom: -5px;
    position: relative;
}
.simpleplayer-stop-control:hover {
    background-image: url('images/stoped.png');
}

Comments

Post a Comment

Popular posts from this blog

Create Desktop Application with PHP

-
Image
Here we will show you how you can create a web-based desktop application using PHP, CSS, HTML, and JavaScript with the help of PHP Desktop. In fact, PHP Desktop is an easy and simple solution we can use to create very powerful and complex desktop application. What Is PHP Desktop? PHP Desktop is an open source project founded by Czarek Tomczak in 2012 to provide a way for developing native desktop GUI applications using web technologies such as PHP, HTML5, JavaScript and SQLite. Mind you, the development workflow you are used to while creating web applications remains the same. The step of turning an existing website into a desktop application is basically a matter of copy and paste. PHPDesktop is an all-made container that will just swallow your project. With that, you can easily transform an existing website into a desktop application without any modification. When you download PHP Desktop , you will have some set of files and folders; among them you will have a
Read more

Insert pandas dataframe into Mongodb

-
Image
Insert pandas dataframe into Mongodb Pandas is most commonly used open-source Python Library for data manipulation, it provides high-performance data manipulation and analysis using its powerful data structures. Here we use pandas library to insert dataframe into Mongodb. I am taking Yahoo finance library to get dataset for a ticker and save that data into Mongo. First, we import all the necessary libraries from pandas_datareader import data as pdr import pandas as pd from pymongo import MongoClient import yfinance as yf yf.pdr_override() We get data from yahoo finance  # download dataframe data1 = pdr.get_data_yahoo("SPY", start="2017-01-01", end="2017-01-15") Now, we make a connection to Mongodb. Here I am connecting to local MongoDb Server on port 27018 and then creating a database with the name `finance`. MongoDB has a collection(table) and I name it as `mycollection`. #Step 1: Connec
Read more

Python desktop application

-
Image
Simple Python desktop application This is a continuation to my previous tutorial ( Python GUI using PyQt ). Anyway I will recap the tutorial on how to develop Python Desktop Application using PyQt5. PyQt is a GUI widgets toolkit. It is a Python interface for Qt, one of the most powerful, and popular cross-platform GUI library.  PyQt API is a set of modules containing a large number of classes and functions. While QtCore module contains non-GUI functionality for working with file and directory etc.,  Environments: PyQt is compatible with all the popular operating systems including Windows, Linux, and Mac OS.  Pip Install: The latest version of PyQt is PyQt5 5.14.1.  You can install pyqt using pip install PyQt5 In this tutorial, we are going to create a simple GUI app to add and delete records in a table using SQLite database. First, we need to create a database connection file with name `create_db.py`. A connection with a SQLite database i
Read more