音樂播放插件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);
        }
    });
}

 

最后大功告成了。

 附下載地址