本次介紹的是音樂播放器APlayer結合WebAPI的使用，先給各位看下效果: 上面就是APlayer的效果，然後這插件的地址是 https://github.com/DIYgod/APlayer 下麵是項目內容： APlayerAndWebApi是處理APlayer的，而WebAPI則是生成音樂列 ...
本次介紹的是音樂播放器APlayer結合WebAPI的使用，先給各位看下效果:
上面就是APlayer的效果，然後這插件的地址是
https://github.com/DIYgod/APlayer 下麵是項目內容：
APlayerAndWebApi是處理APlayer的，而WebAPI則是生成音樂列表數據的json數據
1.前期準備（WebAPI跨域配置，在WebApi項目里配置）：
本次調用的WEBAPI項目我把它設置在不同的項目了，因此會涉及到跨域的問題，因此要在NuGet里引用（技術支援：http://www.cnblogs.com/landeanfen/p/5177176.html）
microsoft.aspnet.webapi.cors
然後在App_Start文件夾下麵的WebApiConfig.cs文件夾配置跨域
//跨域配置
config.EnableCors(new EnableCorsAttribute("*", "*", "*"));
我們暫定三個“*”號，當然，在項目中使用的時候一般需要指定對哪個功能變數名稱可以跨域、跨域的操作有哪些等等，請參照上面的技術支援地址，目前為了方便調試，全開放了。
2.WebApi音樂列表代碼獲取：
建立名為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; }
}
}
然後就是獲取音樂列表的介面
public class ValuesController : ApiController
{
[HttpGet]
[Route("api/GetMusicList")]
public IHttpActionResult GetMusicList()
{
//獲取傳過來的
List<MusicModel> musiclist = new List<MusicModel>();
MusicModel model = new MusicModel { title = "Wishing", url = "http://p2.music.126.net/SSbLcrSgYE8WnjDB8R-hEw==/1423867572602074.mp3", pic = "http://p3.music.126.net/AAq1qOhfyrClGK1mg3mGYQ==/18776360067593424.jpg", author = "水瀬いのり" };
musiclist.Add(model);
//這裡先建立兩個對象，加入到音樂列表
model = new MusicModel { title = "Stay Alive", url = "http://p2.music.126.net/HBaT8T5zNfeOs3moefyDSQ==/18766464462962331.mp3", pic = "http://p3.music.126.net/AAq1qOhfyrClGK1mg3mGYQ==/18776360067593424.jpg", author = "高橋李依" };
musiclist.Add(model);
return Json(musiclist);
}
}
3.APlayerAndWebApi里配置APlayer
HTML：
<div id="musicplayer" class="aplayer"></div> <script src="~/js/APlayer/APlayer.min.js"></script> <script src="~/js/APlayer/custom.js"></script>
JS代碼：
jQuery.support.cors = true;
var postlink = "http://localhost:58982/";
$(function () {
initMusicList();
});
var initMusicList = function () {
var link = postlink + "api/getmusiclist";//調用WebAPI的介面獲取音樂列表數據
var param = { };
$.ajax({
type: "GET",
url: link,
cache: false, //禁用緩存
data: param, //傳入組裝的參數
dataType: "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 () {
//此處為記錄動作，比如用戶點擊了播放，用戶自定義，詳細查看API
});
}
},
error: function (ex) {
//alert(ex);
}
});
}
最後大功告成了。
附下載地址
