<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title>audio Player. Compatible with IE9 and above </title>
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >
<meta name= "viewport" content= "width=device-width,initial-scale=1"/>
<link rel= "stylesheet" href= "Css/audioplayer.css"/>
<script src= "Js/jquery.js" ></script>
<script src= "Js/audioplayer.js" ></script>
<!--Hide Music controls--
<style>
. Audioplayer1{display:none;}
</style>
<script>
$ (function () {
Pause Playback
$ ("#stop"). Click (function () {
$ ("audio") [0].pause ();
});
Play
$ ("#start"). Click (function () {
$ ("audio") [0].play ();
});
Playback duration
$ ("#duration"). Click (function () {
Alert ($ ("audio") [0].duration)
});
});
</script>
<body>
<input type= "button" id= "Start" value= "Play"/>
<input type= "button" id= "Stop" value= "pause"/>
<input type= "button" id= "duration" value= "Play duration" >
<!--when used, the music control is placed at the bottom of the screen--
<div class= "AudioPlayer1" >
<!--after the document is loaded, it automatically loops back. Compatible with IE9 and above-
<audio src= "Audio/1.mp3" preload= "Auto" controls AutoPlay loop ></audio>
<div>
</body>
jquery Audio Player