LearnFast.Ninja

jQuery jPlayer tutorial about audio autoplay

Mark your file as HTML 5. Add reference to JQuery and jPlayer script files. Create div with id. Write script to define create the setting for your audio and auto play. You can copy the working example code and listen to the music. Note you need to place mp3 file with the same name and path. The result: Music playing…

Step 1: Mark your file as HTML 5.
<!DOCTYPE>

Step 2: Add reference to JQuery and jPlayer script files.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>

<script type="text/javascript" src="jquery.jplayer.js"></script>


Step 3: Create div with id.
<div id="jpId"></div>

Step 4: Write script to define create the setting for your audio and auto play (see the example below).

Working Example code:

<!DOCTYPE>

<html>

<head>

    <title>HTML 5 audio</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>

    <script type="text/javascript" src="jquery.jplayer.js"></script>

    <script type="text/javascript">

        $("document").ready(function () {

            $("#jpId").jPlayer(

                {

                    ready: function () {

                        $(this).jPlayer("setMedia", {

                            mp3: "MySong.mp3" // Url of the mp3 file

                        }).jPlayer("play");

                    },

                    supplied: "mp3"

                }

            );

        });

    </script>

</head>

<body>

    <div id="jpId"></div>

</body>

</html>


Result:


Tags

jquery

html-5-audio jplayer jplayer-autoplay