Play Audio file with Play Pause in HTML5 Audio example

Last Reply on Sep 04, 2015 03:56 AM By Shashikant

Posted on Sep 03, 2015 02:06 AM

I am using ajax and javascript to play sound from specific time till a specific time.

I do change the class from play to pause when user plays it but i am unable to change it back to play when the sound duration stops

 <script type="text/javascript">
        function aud_play_pause() {
            var myAudio = document.getElementById("myTune");
            var musicStartTime = 25;
            var musicStopTime = 35;
            if (myAudio.paused) {
                $('#stateicon').removeClass('fa fa-play');
                $('#stateicon').addClass('fa fa-pause');
                myAudio.currentTime = musicStartTime;
                myAudio.play();


            }
            else {
                $('#stateicon').removeClass('fa fa-pause');
                $('#stateicon').addClass('fa fa-play');
                myAudio.currentTime = musicStartTime;
                myAudio.pause();

            }

        }
    </script>
    <script type="text/javascript">

        $(document).ready(function () {
            var myAudio = document.getElementById("myTune");
            var stateicon = document.getElementById("stateicon");
            $(myAudio).bind('timeupdate', function () {
                if (myAudio.currentTime >= 45) {
                    $('stateicon').removeClass('fa fa-pause');
                    $('stateicon').addClass('fa fa-play');
                    myAudio.pause();
                }
            });
            if (myAudio.currentTime >= 35) {
                $('stateicon').removeClass('fa fa-pause');
                $('stateicon').addClass('fa fa-play');
                myAudio.currentTime = 0;
                myAudio.pause();
            }
        });
    </script>

 

You are viewing reply posted by: Shashikant on Sep 04, 2015 03:56 AM.
Posted on Sep 04, 2015 03:56 AM Modified on on Sep 04, 2015 05:26 AM

Here I have created sample that full-fill your requirement.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div>
        <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            function aud_play_pause() {
                var myAudio = document.getElementById("myTune");
                var musicStartTime = 25;
                var musicStopTime = 35;
                if (myAudio.paused) {
                    $('#stateicon').removeClass('fa fa-play');
                    $('#stateicon').addClass('fa fa-pause');
                    myAudio.currentTime = musicStartTime;
                    myAudio.play();
                    $('#stateicon').html("Pause");
                }
                else {
                    $('#stateicon').removeClass('fa fa-pause');
                    $('#stateicon').addClass('fa fa-play');
                    myAudio.currentTime = musicStartTime;
                    myAudio.pause();
                    $('#stateicon').html("Play");
                }
            }
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                var myAudio = document.getElementById("myTune");
                var stateicon = document.getElementById("stateicon");
                $(myAudio).bind('timeupdate', function () {
                    if (myAudio.currentTime >= 45) {
                        $('#stateicon').removeClass('fa fa-pause');
                        $('#stateicon').addClass('fa fa-play');
                        myAudio.pause();
                        $('#stateicon').html("Play");
                        $(myAudio).unbind('timeupdate');
                    }
                });
                if (myAudio.currentTime >= 35) {
                    $('#stateicon').removeClass('fa fa-pause');
                    $('#stateicon').addClass('fa fa-play');
                    $('#stateicon').html("Play");
                    myAudio.currentTime = 0;
                    myAudio.pause();
                }
            });
        </script>
        <li class="pull-left"><a href="javascript:void(0)" onclick="aud_play_pause()"><i
            id="stateicon" class="fa fa-play">Play</i></a>
            <audio id="myTune">
                <source src="https://s3-ap-southeast-1.amazonaws.com/gitaverses/ChapterVerse/Bhagavad-gita01.mp3"/>
        </audio>
        </li>
    </div>
</body>
</html>

Demo

I hope this will help you out.