An example of adding a CSS3 music player to your blog space

This is a very simple player effect, the interface mainly utilizes some attributes of CSS3, such as animate, translate, transform, etc., the effect is to use HTML5 audio attributes with JS implementation. The player is relatively concise and does not implement list playback, volume control, lyrics display and other relatively complex functions, such as the need to achieve such as cool dog music player effect, please delve into the audio. Personally, the player is enough to meet the needs of non-music sites such as blogs. Of course, such as the past, including this sentence is nonsense:
About Audio

Audio labels define sounds, such as music or other audio streams. Supports global properties and event properties in HTML5. Text content can be placed between the start and end tags so that older browsers can display information that does not support the label. Such as:

<audio src= "Someaudio.wav" >

Your browser does not support the audio tag.
</audio>1

Attribute Value Description
AutoPlay AutoPlay If this property appears, the audio plays immediately after it is ready.
Controls controls if this property appears, the control is displayed to the user, such as the play button.
Loop loop If this property occurs, the playback starts again whenever the audio is finished.
Preload preload If this property occurs, the audio is loaded when the page loads and is ready to play.
If "autoplay" is used, the property is ignored.
The URL of the audio to be played by the SRC URL.
All the above, you can see in W3school, and the following content, you can only see here (^) V
HTML structure

<a class= "MyMusic" title= "Let's Swing Two oars" >
<span class= "Circle Play" ></span>
</a>

CSS Styles

. mymusic{
Display:block;
width:55px;
height:55px;
border-radius:100%;
position:relative;
}
. mymusic:after{
Display:block;
Content: ' \f001 ';
width:55px;
height:55px;
font-family: ' Fonticon ';
Text-align:center;
font-size:25px;
line-height:55px;
Position:absolute;
top:0;
left:0;
}
. MyMusic. circle{
Display:block;
width:50px;
height:50px;
border-radius:100%;
border:5px solid Rgba (0,0,0,0);
Border-top-color: #78dc1e;
Border-bottom-color: #78dc1e;
Position:absolute;
left:0;
box-shadow:0 0 35px #6ffe11;
}
. play{
-webkit-animation:circle 1s ease-in-out infinite;
animation:circle 1s ease-in-out infinite;
}
. pause{
-webkit-animation-play-state:paused;
animation-play-state:paused;
}
@-webkit-keyframes Circle {
from{-webkit-transform:rotate (0deg);}
To{-webkit-transform:rotate (360deg);}
}
@keyframes Circle {
From{transform:rotate (0deg);}
To{transform:rotate (360deg);}
}

Javascript

Music Path
var musicsrc = ' http://yinyueshiting.baidu.com/data2/music/134379562/10494647255600128.mp3?xcode= F9439132fa6a4fdb3143226ac1c6712284958927e6b1be18 ';
var audio = null;
function Setaudio () {
Audio = document.createelement (' audio ');
AUDIO.SRC = MUSICSRC;
if (!audio) {
Audio.load (); Load Music
}else{
Audio.play ();
Audio.loop = true; Loop playback
}
}
var musicbtn = $ ('. MyMusic ');
var $music = Musicbtn.find ('. Circle ');
Control
Musicbtn.off (). On (' click ', function () {
if ($music. Hasclass (' play ')) {//If already played, pause
Audio && (Audio.pause ());
$music. addclass (' pause '). Removeclass (' play ');
}else{
Audio && (Audio.play ());
$music. addclass (' play '). Removeclass (' pause ');
}
});
Page after load execution
Window.onload = function () {
Setaudio ();
   }