Home > Developer > Web Develop
Recently learned the audio tag in HTML5, the best way to learn his course is practice, so he wrote a. Then go directly to the demo link.
Http://htmlpreview.github.io/?https://github.com/djlxiaoshi/Audio/blob/master/music.html. Imitate the QQ Music web version of the part of the style. Who calls themselves no UI!
Audio and video tags are added to the HTML5, and the two tags are very similar in usage. The functionality is quite powerful, so let's take a look at the support of each browser in the audio tag. Here is still can I use this online site, I believe that the learning front-end students should be not unfamiliar.
We can see that the major browsers support this element very much, except IE8 before and opera Mini, so just do it.
Related documents: Audio MDN Audio Rookie Tutorial
For this element how to use, personal feeling there is nothing good to explain, are at a glance. I will explain some of the audio properties, methods, when the event will be used.
1 methods
Play () play this goes without saying. Set the Puased property to False
Pause (), paused it's needless to say. Set the Puased property to True
Load () Reload
FastSeek Set Playback time FastSeek (30) Set playback from 30s, can be used to fast forward, but this method Google does not support, Fox Fire can, so it is best to set the currenttime to achieve.
Canplaytype () Check whether the browser can play the specified audio type if you want to do a perfect thing is possible, but generally common music types, the browser will support.
2 Properties
Common Properties and their methods I've already labeled them. Be sure to load the music before playing the music, that is, set the Audio.src property. The paused property is set to True when playback is set to False when paused.
Because of the attribute event too many, so the use of this way of labeling, but also hope you forgive me.
3 Events:
Attention:
When audio/video is in the loading process, the following events occur sequentially:
The use of this tag is actually very simple, the difficulty of completing the player is logical control, the idea of clarity, so before writing the code must draw a flowchart. Here I recommend an online block diagram design site, without comment, because I have only used this one: https://www.processon.com of course can also draw thinking brain map and other.
Some of the following questions may be used in the diagram of the player you are writing:
1
2
The reason I encountered this problem is that the music does not load (without setting AUDIO.SRC) directly audio.play () will not error, but click the Close button to execute Audio.pause (), will report this error. Below is the test code that produces the same error
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> </Head> <Body> <AudioID= "Audiodom"></Audio> <Buttononclick= "Test ()">Shut down</Button> </Body> <Scripttype= "Text/javascript"> varDom=document.getElementById ("Audiodom"); Dom.play (); functionTest () {dom.pause (); } </Script> </HTML>
The point is that if a similar problem arises, your playback logic must be a problem.
This is my personal player's GitHub address: music player is not how to organize the optimization, just function has, respectability, veneer, finally warned everyone a little, write code must be backed up, must learn to use Git to manage their own projects. This time there was a small bug, I think the small bug should be easy to change, no backup, the result of the more the bigger the end of the change, a chaotic, in a fury and again, every change will commit.
HTML5 audio tag to create your own music player
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
