Very beautiful HTML5 music player

Aplayer is a very beautiful HTML5 audio player that encapsulates the audio tag and makes a nice player UI with CSS that supports setting song names, singers and lyrics, can set whether to play automatically, supports thumbnails, supports playback progress, and sets the playback source.

View Demo Download Source html

The first is to load the player style file, the style of this player resembles NetEase cloud music player. Then add the player div#player1 to the body and call play later. Then load in 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 () to load the player. Note that Aplayer does not rely on third-party JS libraries, such as jquery or Zepto, which directly encapsulates the audio tags in HTML5, so developers can render beautiful music players on the page with just a few lines of code.

var ap =New Aplayer ({
Element:document.getElementById (     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 ();   
   

Option description

element: A bound player element.

narrow: If you are using narrow-screen mode, which shows only thumbnails and play buttons, see Style 3 in demo.

AutoPlay: Whether to play automatically, note that this does not support AutoPlay on mobile phones.

SHOWLRC: Do you want to show the lyrics, look at the style 1 in demo demo.

Music: Used to set up a collection of information to play, where title represents the music title, author represents the author of the music, the URL represents the playback file address, and pic is, of course, the music thumbnail to play.

Aplayer also provides player events such as loading the player: Ap.init (); Play: Ap.play () and pause: Ap.pause ().

For the latest progress on the Aplayer project, you can focus on Aplayer project address: Https://github.com/DIYgod/APlayer

Disclaimer: This article is original article, helloweba.com and author have copyright, if need to reprint, please indicate from helloweba.com and keep original link: http://www.helloweba.com/view-blog-338.html

Very beautiful HTML5 music player