MENU

手动引入APlayer,Meting,DPlayer

  • • 阅读: 3451
  • • 教程

如不能正常显示，请刷新一下本页

打算少用插件以便提升速度，于是决定调用 html 版本的两个播放器，方法简单粗暴，有点小 bug 但不影响使用

head 插入如下 css，js 文件：

<!-- APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>

<!-- MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting/dist/Meting.min.js"></script>

<!-- DPlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>

APlayer 迷你：

!!!
<div id="aplayer"></div>
<script>
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    mini: true,
    audio: [{
        name: 'name',
        artist: 'artist',
        url: 'https://disk.rong.pw/d/OD5T/music/%E5%BC%A0%E4%B8%89%E7%9A%84%E6%AD%8C.m4a',
        cover: 'https://ii.do/favicon.ico'
    }]
});
</script>
!!!

Meting 歌单：

!!!
<meting-js server="netease" type="playlist" id="5136593474"></meting-js>
!!!

Meting 歌曲：

!!!
<meting-js auto="http://music.163.com/#/song?id=27808295"></meting-js>
!!!

DPlayer：

!!!
<div id="dplayer"></div>
<script>
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'https://disk.rong.pw/d/OD5T/music/%E6%B9%98%E9%9B%A8%E8%B0%A3.mp4',
    },
});
</script>
!!!

演示仅为个人常用，更多详细参数请看官方文档：
https://aplayer.js.org/#/zh-Hans/
https://github.com/metowolf/MetingJS
http://dplayer.js.org/zh/

至于 PJAX 啥子的我就不晓得弄了

最后编辑于: 2021 年 09 月 14 日
添加新评论

已有 15 条评论
  1. 新手 新手
    回复

    你好！ 我还是不明白怎么弄的，我的一直不行。只是显示


    能请你帮一下吗

  2. Mr.Luo Mr.Luo
    回复

    多谢大佬，搞定了。

  3. 南柯一梦 南柯一梦
    回复

    ::quyin:1huaji::好看

    1. Dark Dark
      回复

      @南柯一梦该睡觉了\#(邪恶)

  4. cbsc cbsc
    回复

    歌单不错，在听?

    1. Dark Dark
      回复

      @cbsc这不是我的歌单，因为网抑云抽风，我就随便填了个酷狗的\#(抽烟)

    2. cbsc cbsc
      回复

      @Dark曲风很休闲抒情，改善了我对英文歌的观感^_^

  5. Dieinwarm Dieinwarm
    回复

    第一个歌单没有正常显示::quyin:1huaji::

    1. Dark Dark
      回复

      @Dieinwarm今天突然不显示了

    2. Dieinwarm Dieinwarm
      回复

      @Dark我博客的右上角的歌单播放器也经常出问题，刚设置的时候正常，过几天就出问题了::quyin:hematemesis::

    3. Dark Dark
      回复

      @Dieinwarm应该都是jsdelivr的问题

    4. Dark Dark
      回复

      @Dieinwarm找到问题了，是网抑云又改了什么，我放酷狗的歌单可以

    5. Dieinwarm Dieinwarm
      回复

      @Dark哈哈哈哈，辣鸡网抑云，但是新的歌单可以显示，不能播放，会一首一首的自动跳过@(滑稽)

  1. 1
  2. 2