<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <title>HTML5 Music Player</title></Head><Scriptsrc= "Https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></Script><Body> <H2>Sound information</H2> <DivID= "Length">Duration:</Div> <DivID= "source">Source:</Div> <DivID= "status"style= "color:red;">Status:loading</Div> <HR> <H2>Control Buttons</H2> <ButtonID= "Play">Play</Button> <ButtonID= "Pause">Pause</Button> <ButtonID= "Restart">Restart</Button> <HR> <H2>Playing Information</H2> <DivID= "CurrentTime">0</Div></Body><Scripttype= ' Text/javascript '>$ (document). Ready (function() { varaudioelement=Document.createelement ('Audio'); Audioelement.setattribute ('src', 'Http://cms.shouji.sogou-inc.com/sweb/sapp/rabbit/fenshou.mp3'); Audioelement.addeventlistener ('ended', function() { This. Play (); }, false); Audioelement.addeventlistener ("Canplay",function(){ $("#length"). Text ("Duration:" +audioelement.duration+ "seconds"); $("#source"). Text ("Source:" +audioelement.src); $("#status"). Text ("Status:ready to play"). CSS ("Color","Green"); }); Audioelement.addeventlistener ("timeupdate",function(){ $("#currentTime"). Text ("Current Second:" +audioelement.currenttime); }); $('#play'). Click (function() {audioelement.play (); $("#status"). Text ("status:playing"); }); $('#pause'). Click (function() {audioelement.pause (); $("#status"). Text ("status:paused"); }); $('#restart'). Click (function() {audioelement.currenttime= 0; }); });</Script></HTML>
HTML5 Audio Player