本次介绍的是音乐播放器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);}});
}

最后大功告成了。

附下载地址

转载于:https://www.cnblogs.com/renyiqiu/p/5833757.html

音乐播放插件Aplayer+WebAPI的使用【附下载】相关推荐

  1. 好用的Typecho在线音乐播放插件-APlayer

    Typecho在线音乐播放插件-APlayer 支持国内五大音乐平台(网易云.QQ.虾米.百度.酷狗)的单曲/专辑/歌单播放 简单快捷,复制音乐详情页面网址,后台自动生成播放代码 前端 APlayer ...

  2. php 播放多个音乐,meting 音乐播放插件多域名跨域解决方法

    换了模板使用了meting音乐播放插件由于我解析了两个域名 一个是顶级域名nnnuo.com,还有个www二级域名. 但是meting插件在后台设置云解析地址的时候只要是使用其中一个域名另外一个域名访 ...

  3. jekyll个人博客中添加音乐播放插件

    方法一: 环境要求 jekyll 七牛 开始使用 step1 首先下载这个文件open-embed.html,右键,另存为Html;下面是源码,也可以复制保存下面的源码; <style> ...

  4. Aplayer音乐播放插件

    APlayer中文官网 安装 使用 npm: npm install aplayer --save 使用 Yarn: yarn add aplayer 入门 <link rel="st ...

  5. 开源html5在线音乐网站,一个漂亮的开源HTML5音乐播放器——APlayer

    介绍 APlayer是一个简约且漂亮的html5音乐播放器,支持多种模式,包括播放列表模式.吸底模式 .迷你模式.MSE模式.HLS模式. Github https://github.com/diyg ...

  6. CentOS安装外部源,然后通过yum安装rhythmbox音乐播放插件

    安装外部源epel,   即 sudo rpm -ivh http://dl.fedoraproject.org/pub/epel/6/i386/epel-release-6-8.noarch.rpm ...

  7. vue3 + uni-app 封装音乐播放插件

    1.初始化一个音乐实例 let AUDIO = '' export const initAudio = function (url) {AUDIO = uni.createInnerAudioCont ...

  8. Flash版(迷你音乐播放器mp3Player1.0 Beta1 )附源码

    迷你音乐播放器mp3Player1.0 Beta1  ================= //What's new: 主要功能特色: 1.支持歌曲名称,歌手名称以及专辑等关键字搜索. 2.支持随机搜索 ...

  9. Hexo博客使用aplayer音乐播放插件

    首先:本文基于CentOS 8.5 64位,其他操作系统请注意修改对应命令关键字,并且本文只介绍Hexo部署的方法和过程, 文章目录 前情提要 〇.懒人版 一.独立部署 写法1 写法2 二.插件配置 ...

最新文章

  1. ssm框架实现学生成绩管理系统
  2. C语言实现数据文件怎么找,急求如何将下列C语言程序数据存储到文件中?
  3. redis internal【转】
  4. 稳定性与高可用保障的工作思路
  5. Experimental-work1
  6. Notepad++如何对比文件 Notepad++对比两个文件代码方法
  7. 利用 Windows 子系统 Linux(WSL)开发 Python 环境搭建
  8. 转: android编译过程(流程图)
  9. f.readline()的奇妙坑点
  10. 英特尔 超核芯显卡 620mac_十代i9+3080显卡,男孩们的攒机快乐,还得拿出来显摆显摆!...
  11. JQuery中$(document)、$(document).ready()是什么意思?
  12. 负载均衡下的多台tomcat服务器,通过memcache实现session共享
  13. 万国数据二季度调整后EBITDA利润率43.5% 高于指引预测
  14. iis6 增加PHP+MYSQL等时,记得 PHP目录要给EVERYONE权限
  15. 【coq】函数语言设计 笔记 01 - basics
  16. ECC与Pairing前沿调研
  17. netcore 集成 CAP 使用 rabbitMQ集群
  18. Python版实现12306抢票功能,真的能帮你抢到春运回家的票吗?
  19. java/php/net/python“最终幻想14”游戏时装图鉴网站设计与制作
  20. 【HarmonyOS】鸿蒙3.0使用WebView进行链接跳转,告警“hwbr_engine_AwContentsClient: Denied starting an intent without a

热门文章

  1. linux通过操作界面和命令行的方式查看ip地址、mac地址
  2. info matlab,c – 在OpenCV中是否有类似MATLAB的’impixelinfo()’功能?
  3. 转载:AD的授权还原和主还原:深入浅出Active Directory系列(六)
  4. python干货_Python干货整理,从入门说起(7.4)
  5. 使用MTL库求解最小二乘解
  6. 使用SQLite3支持中文路径
  7. Arcgis javascript那些事儿(十三)——距离面积计算
  8. JavaWeb——新建项目与新建servlet
  9. Bootstrap手风琴菜单
  10. c语言代码先来先服务算法_C语言十大经典排序算法(动态演示+代码,值得收藏)...