本次介绍的是音乐播放器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. Json 装 list<object>objectList

    List<MallGoodComment> mallGoodCommentList = JSONObject.parseArray(mallGoodComments, MallGoodCo ...

  2. CMS: DNN And Umbraco

    在比较了众多CMS系统后,还是把焦点定在DNN和Umbraco两个系统上,这两个系统都可以使用UserControl扩展自己需要的功能. DNN的架构比较复杂,Module.Skin.Containe ...

  3. unittest之装饰器

    前面讲到 unittest 里面 setUp 可以在每次执行用例前执行,这样有效的减少了代码量,但是有个弊端,比如打开浏览器操作,每次执行用例时候都会重新打开,这样就会浪费很多时间.于是就想是不是可以 ...

  4. OSI与TCP/IP协议区别

    1 OSI参考模型 谈到网络不能不谈OSI参考模型,虽然OSI参考模型的实际应用意义不是很大,但其的确对于理解网络协议内部的运作很有帮助,也为我们学习网络协议提供了一个很好的参考.在现实网络世界里,T ...

  5. unity小地图上的动态图标

    unity制作小地图简单,用rawImage 再来个摄像机就行 但是现在一个需求就是地图上一些东西要加上图标,图标会随着地图物体的移动而移动 然后去网上下载了个小地图插件  UGUI MiniMap( ...

  6. Visual Studio 2013复制项目

    在当前解决方案下复制项目的步骤: 1. 在硬盘存放代码的目录下将整个文件拷贝一份,修改文件夹名字,改成新的项目名称, 然后修改 *.csproj文件,名字必须与新项目名一致. 2. 在解决方案上右键 ...

  7. Git中.gitignore, 忽略追踪

    在目录下 创建: .gitignore文件,将不需要被追踪的文件地址, 写在该文件中, 此时git软件就不会追踪列出的文件进行版本同步: windows不允许创建没有文件名的文件,可以用编辑器创建.g ...

  8. 从代理模式到Spring AOP

    什么是代理模式 假如我喜欢上隔壁班的翠花,但是我没胆量向她送花,这时候我需要一个铁杆哥们帮我做这件事, 很明显这哥们是个代理,是去执行任务的,但是花实际上是我"送"的,代理和我一样 ...

  9. css三栏布局方案整理

    日常开发中,经常会用到css三栏布局,现将工作中常用的css 三栏布局整理如下: 什么是三栏布局: 三栏布局,顾名思义就是两边固定,中间自适应. 一. float布局 <!DOCTYPE htm ...

  10. 一:SpringDataJPA

    一:spring data jpa介绍 spring data:其实spring data就是spring提供了一个操作数据的框架.而spirng data jpa只是spring data框架下的一 ...