本次介绍的是音乐播放器APlayer结合WebAPI的使用,先给各位看下效果:
 

上面就是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);
}
});
}

最后大功告成了。

下载地址

音乐播放插件Aplayer+WebAPI的使用【附下载】的更多相关文章

  1. web简易MP3播放插件 Aplayer篇章一

    效果如图所示: 写入初始代码,定义一个id唯一的div player1 <!DOCTYPE html> <html> <head> <meta charset ...

  2. 个人博客添加网易云音乐Flash插件

    博客底部添加网易云音乐播放插件 歌单或者歌曲外链可从音乐界面"生成外链播放器"中得到,选择Flash播放插件即可 footer.html文件增加 实现效果: 历史精选文章: Jli ...

  3. 我在 Gitee 上发现了一个简洁又好用的网络音乐播放器!

    这几天无聊的时候我想听听歌,但我想要找一个简单快速的网络音乐播放器来用用.这时我在 Gitee 上看见一个看上去不错的开源项目 -- Hi音乐. 项目链接:https://gitee.com/hi-j ...

  4. 小型音乐播放器插件APlayer.js的简单使用例子

      本篇博客将会给出一个小型音乐播放器插件APlayer.js的使用例子.关于APlayer.js的具体介绍和Github地址,可以参考: https://github.com/MoePlayer/A ...

  5. 10个免费开源的JS音乐播放器插件

    点这里 音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些 网页播放器 插件比较少见,所以这里为大家整理一个集合,也许会有用到的时候. 下面整理的播放器有些是支持自适应的, ...

  6. 仿酷狗音乐播放器开发日志二十四 选项设置窗体的实现(附328行xml布局源码)

    转载请说明原出处,谢谢~~ 花了两天时间把仿酷狗的选项设置窗体做出来了,当然了只是做了外观.现在开学了,写代码的时间减少,所以整个仿酷狗的工程开发速度减慢了.今天把仿酷狗的选项设置窗体的布局代码分享出 ...

  7. 简约的HTML5音乐播放器插件

    从我刚开始接触前端的时候就想写一个能播放音乐的小程序,刚开始写的时候虽然可以放,但是确实很慢,很卡,有很多可以优化的地方.最近在前一个版本的基础上重写了一个音乐播放器的插件,速度还可以吧 因为追求简约 ...

  8. Lily_music 网页音乐播放器 -可搜索(附歌词联动播放效果解说)

    博客地址:https://ainyi.com/59 写在前面 这是我今年(2018)年初的小项目,当时也是手贱,不想用别的播放器,想着做一个自己的网页播放器,有个歌曲列表.可关键词搜索.歌词滚动播放的 ...

  9. 使用 原生js 制作插件 (javaScript音乐播放器)

    1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

随机推荐

  1. [目录]hybrid app 开发实战(基于ionic,cordova,angularjs)

    序:为什么要写这个系列 第一章:hybrid app开发之技术选型 第二章:ionic,cordova,phonegap关系浅析 第三章:ionic环境搭建之windows篇 第四章:ionic环境搭 ...

  2. Struts2注解详解

    一,引入支持Struts2支持注解开发jar包: struts2-convention-plugin-2.1.8.1.jar(支持Struts2框架注解开发的jar包) 二,Struts2使用注解开发 ...

  3. 深入理解Solaris X64系统调用

    理解系统调用的关键在于洞悉系统调用号是联系用户模式与内核模式的纽带.而在Solaris x64平台上,系统调用号被保存在寄存器RAX中,从用户模式传递到内核模式.一旦进入内核模式,内核的sys_sys ...

  4. HDU 5691 ——Sitting in Line——————【状压动规】

    Sitting in Line Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Other ...

  5. php根据IP获取所在省份-百度api接口

    这里用的file_put_contents,你也可以用别的,直接怼代码: //拼接传递的参数 $getData = array( 'query' => '127.0.0.1', 'resourc ...

  6. js confirm实现换行

    js中confirm或者alert不识别标签,所以要换行的话可以采用下面方式 \u000d 或者 \r: <script> var res=confirm(\"这是测试工作: \ ...

  7. Firebird Procedure 带返回的存储过程

    火鸟定义带返回的存储过程是这样,先定义返回结果字段列表,然后为返回字段一一赋值,当你需要返回一行时,就suspend. 当需要返回多行时,就再次为返回字段变量赋值,suspend. 示例: creat ...

  8. [转]用Excel制作甘特图并管理项目

    对于比较简单的项目管理,或绘制甘特图,选用电子表格工具——比如价格高也最强大的Excel.开源的OpenOffice.免费的WPS——可能比项目管理软件更方便. 1. XL-Easy Gantt 模板 ...

  9. SSRS 通过Customer Code访问Dataset

    A dataset in Reporting Services is not the same type of object as an ADO.Net dataset.  A report data ...

  10. 此请求的URL的长度超过配置的maxUrlLength值

    aps.net 网站的url长度默认限制为260个字符. 修改web.config即可   <system.web> <httpRuntime maxUrlLength=" ...