1<script type="text/javascript">
2            $(
3                function(){
4                    var aud = $('audio')[0];
5                    $('.playpause').on('click', function(e){
6                        e.preventDefault();
7                    if (aud.paused) {
8                        aud.play();
9                        /* from play icon to pause icon */
10                        $('.playpause .fa-play').remove();
11                        $('.playpause').append('<i class="fa fa-pause"></i>');
12                    }
13                    else {
14                        aud.pause();
15                        /* from play icon to pause icon */
16                        $('.playpause .fa-pause').remove();
17                        $('.playpause').append('<i class="fa fa-play"></i>');
18                    }
19
20                })
21                $('.next').on('click', function(e){
22                    e.preventDefault();
23                    aud.src = '{$content:audio-file}';
24                })
25                $('.previuos').on('click', function(e){
26                    e.preventDefault();
27                    aud.src = '{$content:audio-file}';
28                })
29                aud.ontimeupdate = function(){
30                    $('.progress').css('width', aud.currentTime / aud.duration * 100 + '%')
31                }
32            })
33        </script>
34