1 <!--Use the HTML5 label <audio> Picture play button to increase the listening and listening events, to control the playback of music pause2 Several important functions of document are used:3 1.createElement Create a Label object,4 2.getElementById Gets the src attribute of the object and the IMG object5 3.document.body Add control appendchild () function6 learn the power of document. You can create objects, manipulate body tags, etc. -7 <!DOCTYPE HTML>8 <HTML>9 <Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8">Ten <Body> One <H3>Music Playback Pause Example</H3> A - <P>Click the button to play, pause the music</P> - the <imgID= "Image_button"src= "Source/pause.jpg"onclick= "myFunction ()"></Button> - - <PID= "txt">Click the button to play the music</P> - + <Scripttype= "Text/javascript"> - varIsplay= false; + varx=Document.createelement ("AUDIO"); A X.setattribute ("src", "Source/music.mp3"); at document.body.appendChild (x); - functionmyFunction () - { - if(Isplay== false) { - X.play (); - document.getElementById ("Image_button"). SRC="source/play.jpg"; in document.getElementById ("txt"). InnerHTML= "< pompous >--eason"; - Isplay= true; to }Else{ + x.pause (); - document.getElementById ("Image_button"). SRC="source/pause.jpg"; the document.getElementById ("txt"). InnerHTML= "Click the button to play the music"; * Isplay= false; $ }Panax Notoginseng } - </Script> the + </Body> A </HTML>
Note that you need to place Pause.jpg,play.jpg,music.mp3 under the source folder.
The file structure is {Index.html,source[pause.jpg,play.jpg,music.mp3]} (index.html is the code file affixed above, saved in HTML format. )
HTML5 the audio label control's song playback pause demo