Use HTML5 to create a beautiful webpage music player

Aplayer is a very beautiful HTML5 audio player, it will audio tag encapsulation, and the combination of CSS to create a beautiful player UI, it supports the setting of song name, singers and lyrics, you can set whether AutoPlay, support thumbnails, support playback progress and set the playback source.

Html

The first is to load the player style file, this player style resembles NetEase cloud music player. Then add the player div#player1 to the body and call playback later. Then load the Aplayer.js file.

<link rel= "stylesheet" href= "APlayer.min.css" >
<div id= "Player1" class= "Aplayer" ></div>
<script src= "APlayer.min.js" ></script>
Javascript

Now let's call Aplayer, start with a new object, bind the Player element, set various options, and finally use Ap.init (), and load the player. Note that Aplayer does not rely on Third-party JS libraries such as jquery or Zepto, which encapsulates the audio tags in HTML5, so developers can present beautiful music players on the page with just a few simple lines of code.

var ap = new Aplayer ({
Element:document.getElementById (' Player1 '),
Narrow:false,
Autoplay:true,
Showlrc:false,
Music: {
Title: ' Preparation ',
Author: ' Hans zimmer/richard Harvey ',
URL: ' Http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3 ',
Pic: ' Http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg '
}
});
Ap.init ();

Options description

Element: A bound player element.
Narrow: Whether to use narrow screen mode, that is, to show only thumbnails and play buttons, see Style 3 in demo demo.
AutoPlay: Whether to play automatically, note that this does not support AutoPlay on the mobile phone.
SHOWLRC: Do you want to show the lyrics, see Style 1 in demo demo.
Music: Used to set up a collection of music-related information, in which title denotes the music title, author the author of the music, the URL represents the address of the playback file, and pic is, of course, the music thumbnail that is played. The
Aplayer also provides player events, such as loading the player: Ap.init (); Playback: Ap.play () and pause: Ap.pause ().