vsPlayAudio小体积美观的音乐播放器(原创)

所属分类:媒体-音频和视频

 25185  306  查看评论 (11)
分享到微信朋友圈
X
vsPlayAudio小体积美观的音乐播放器(原创) ie兼容10

注:请在服务端预览,加载外部json地址文件,本地预览会有跨域问题!

更新时间:2020-08-27 08:43:36

更新说明:更新播放地址为本地音乐,之前的网易云解析服务器已失效。


更新时间:2019/6/19 下午10:29:23

更新说明:重写部分代码,之后更好维护。


vsPlayAudio

小体积美观的音乐播放器mini music player

简介

1. 暂时只支持网易云音乐之后添加本地音频  

2. 暂时不支持手机端(未测试)

3. 版本初期可能会有BUG

使用方法

<head>
<script src="./dist/vsPlayAudio.min.js"></script>
</head>
<body>
...
<div id="vsPlayAudio"></div>
...
<script>
new vsPlayAudio({
    element: "vsPlayAudio",
    autoPlay: false,//自动播放
    music: {
        //必需项,音乐配置
        type: 'cloud',
        //必需项,网易云方式指定填'cloud'
        source: 2778782119
        //必需项,网易云音乐歌单id
        //登录网易云网页版,在网页地址中拿到
        // ... playlist?id=317921676
    },
    random: false//随机播放
});
</script>
</body>
相关插件-音频和视频

js音频可视化插件Wavesurfer.js

Wavesurfer.js是一个javascript库用于创建交互式可操作音频可视化,使用Web Audio和HTML5 Canvas技术。可以显示当前音频的声波
  音频和视频
 62424  347

jQuery网页跨平台媒体播放器

用于Web的可扩展的媒体播放器,跨平台,支持HLS,MP3,MP4等格式。
  音频和视频
 106723  380

一款简单实用的视频播放插件

虽小却精悍,可自动播放,音乐,视频,支持HTML5
  音频和视频
 131284  442

jwplayer响应式多终端适配视频播放器

jwplaye,自定义视频图片封面,全浏览器兼容、响应式多终端适配视频播放器
  音频和视频
 176290  664

讨论这个项目(11)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    泽狗 0
    2019/11/26 22:25:44
    不能播放了呢
        毒.0
        2019/11/28 8:48:52
        插件出问题了。 地址请求不到了
        白天黑夜0
        2020/1/2 16:25:34
        老板人呢,我的也不能用了
        西瓜0
        2020/8/27 8:48:14
        因为之前地址为网易云地址失效,更换播放地址即可!
    回复
    略略 略略 0
    2019/7/24 11:29:26
    net::ERR_CONTENT_LENGTH_MISMATCH 好像歌曲请求不到 回复
    phantasm 0
    2019/6/21 19:03:38
    播放器很小巧
    https 不播放不知道什么问题,一直提示歌曲获取中...
    有没有什么好的方法切换页面继续播放?
        iocdacc0
        2019/6/21 22:11:02
        单页应用或者
        解析接口用了HTTP所以不支持HTTPS
        有条件可以自己搭一个网易云音乐解析接口
        网易云解析程序是开源的:https://binaryify.github.io/NeteaseCloudMusicApi/#/
        iocdacc0
        2019/6/21 22:32:18
        单页应用或者iframe
    回复
    deanforest 0
    2019/6/9 11:07:48
    简单好用,感谢作者分享! 回复
    areyouOk 0
    2019/5/24 17:38:55
    音乐先的真不错!
        Second Wind .0
        2019/5/30 10:31:44
        是的,很小巧。
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复