Music playback plugin Aplayer+webapi use "download included"

This introduction is the music player Aplayer combined with the use of WEBAPI, first show you the effect:

Above is the effect of aplayer, and then the address of this plugin is

Https://github.com/DIYgod/APlayer below is the project content: Aplayerandwebapi is handling aplayer, while WEBAPI is the JSON data that generates the music list data 1. Pre-Preparation (Webapi cross-domain configuration, configured in the WEBAPI project):This call to the WEBAPI project I set it on a different project, so it will involve cross-domain issues, so be quoted in NuGet (Technical support: http://www.cnblogs.com/landeanfen/p/5177176.html) microsoft.aspnet.webapi.corsThen configure the cross-domain//cross-domain configuration in the WebApiConfig.cs folder under the App_start folder

Config. Enablecors (New Enablecorsattribute ("*", "*", "*"));

We tentatively three "*" number, of course, when used in the project generally need to specify which domain name can cross-domain, cross-domain operations and so on, please refer to the above technical support address, currently for the convenience of debugging, all open.2 . Webapi Music list code get : Create an entity named Musicmodel

namespace webapi.models{public    class Musicmodel    {public        string title {get; set;}        public string Author {get; set;}        public string URL {get; set;}        public string pic {get; set;}}    }

　　

And then the interface that gets the music list.

public class Valuescontroller:apicontroller    {        [httpget]        [Route ("Api/getmusiclist")]        public Ihttpactionresult getmusiclist ()        {            //get passed over the            list<musicmodel> musiclist = new List<musicmodel > ();            Musicmodel model = new Musicmodel {title = "wishing", url = "http://p2.music.126.net/SSbLcrSgYE8WnjDB8R-hEw==/1423867572 602074.mp3 ", pic =" Http://p3.music.126.net/AAq1qOhfyrClGK1mg3mGYQ==/18776360067593424.jpg ", author =" Water Seto いのり "};            Musiclist. ADD (model);            Here we first set up two objects, add to the music list             model = new Musicmodel {title = "Stay Alive", url = "Http://p2.music.126.net/HBaT8T5zNfeOs3moef Ydsq==/18766464462962331.mp3 ", pic =" Http://p3.music.126.net/AAq1qOhfyrClGK1mg3mGYQ==/18776360067593424.jpg ", Author = "High Bridge Li Yi"};            Musiclist. ADD (model);              Return Json (musiclist);        }    }

Configuration Aplayer in 3.APlayerAndWebApi

Html:

<div id= "Musicplayer" class= "Aplayer" ></div><script src= "~/js/aplayer/aplayer.min.js" ></ Script><script src= "~/js/aplayer/custom.js" ></script>

JS Code:

JQuery.support.cors = True;var Postlink = "http://localhost:58982/"; $ (function () {initmusiclist ();});    var initmusiclist = function () {var link = postlink + "api/getmusiclist";//Call Webapi interface to get music list data var param = {}; $.ajax ({type: "GET", Url:link, Cache:false,//Disable cache Data:param,//Parameters for incoming assembly Dataty                PE: "JSON", success:function (data) {if (data! = null) {var musicdata = data;                    var apmusic = new Aplayer ({element:document.getElementById (' Musicplayer '),                    Narrow:false, Autoplay:false, Showlrc:false, Mutex:true,                Theme: ' #ad7a86 ', music:musicdata});                Apmusic.volume (0.3);            Apmusic.on (' Play ', function () {///Here is the recording action, such as the user clicked Play, user-defined, detailed view API}); }}, Error:funCtion (ex) {//alert (ex); }    });}

Finally done.

Report

Music playback plugin Aplayer+webapi use "download included"