前往小程序,Get更优阅读体验!
立即前往
发布
社区首页 >专栏 >美化教程:网站通过代码引入APlayer音乐播放器(二)

美化教程:网站通过代码引入APlayer音乐播放器(二)

作者头像
深白鸭
发布2023-02-22 15:04:18
发布2023-02-22 15:04:18
2K7
举报
文章被收录于专栏:深白小栈深白小栈

上一篇写了APlayer引入网易云等音乐的实现代码,还有引入本地音乐的还没写,这篇是补充上一篇的,如果感兴趣可以移步上一篇。

网站通过代码引入Aplayer音乐播放器,无需插件

11小时前

1528

本地音乐引入

单播放器多音乐

你可以直接将代码通过html的方式插入网页,例如WordPress的插入html块。

实现代码:

  此处内容已隐藏,请评论后刷新页面查看.(https://www.yowap.com/javascript:(scrollTo('#commentform',-120%29%29;)

示例:

​ var demo = new APlayer ({ element: document.getElementById('demo'), showlrc: false, fixed: false, mini: false, audio: { title: '打上火花', author: 'Daoko', url: 'https://api.yowap.com/music/打上花火.m4a', pic: 'https://api.yowap.com/music/打上花火.jpg' }, { title: '心跳的证明', author: '不是花火', url: 'https://api.yowap.com/music/心跳的证明.m4a', pic: 'https://api.yowap.com/music/心跳的证明.jpg' } }); demo.init();

单播放器单音乐

和上面一样

  此处内容已隐藏,请评论后刷新页面查看.(https://www.yowap.com/javascript:(scrollTo('#commentform',-120%29%29;)

示例:

代码语言:txt
复制
 var demo1 = new APlayer     ({         element: document.getElementById('demo1'),         showlrc: false,         audio: {                 title: '心跳的证明',                 author: '不是花火',                 url: 'https://api.yowap.com/music/心跳的证明.m4a',                 pic: 'https://api.yowap.com/music/心跳的证明.jpg'             }     });     demo1.init(); 

多播放器

多播放器大家应该用不到,代码和上面一样,这里也贴出来吧:

  此处内容已隐藏,请评论后刷新页面查看.(https://www.yowap.com/javascript:(scrollTo('#commentform',-120%29%29;)

示例:

代码语言:txt
复制
 var demo2 = new APlayer     ({         element: document.getElementById('demo2'),         showlrc: false,         audio: {                itle: '心跳的证明',                 author: '不是花火',                 url: 'https://api.yowap.com/music/心跳的证明.m4a',                 pic: 'https://api.yowap.com/music/心跳的证明.jpg'             }     });     var demo3 = new APlayer     ({         element: document.getElementById('demo3'),         showlrc: false,         audio: {                 title: '打上火花',                 author: 'Daoko',                 url: 'https://api.yowap.com/music/打上花火.m4a',                 pic: 'https://api.yowap.com/music/打上花火.jpg'             }     });     demo2.init();     demo3.init(); 

这样有什么好处呢,就是在播放一个时,另一个会自动暂停。

结语

其实实现方法都差不多,如果能使用插件都推荐大家使用插件。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 本地音乐引入
    • 单播放器多音乐
    • 单播放器单音乐
    • 多播放器
  • 结语
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档