Aplayer+Metingjs音乐插件的使用

拾忆
2020-11-18 / 0 评论 / 104 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年01月01日,已超过209天没有更新,若内容或图片失效,请留言反馈。

介绍

Aplayer是一个功能强大的HTML5音乐播放器,Metingjs基于Aplayer插件封装好的插件,开箱即用。

Aplayer官网文档:https://aplayer.js.org/#/
Metingjs官网文档:https://github.com/metowolf/MetingJS

简单使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>    
    <!-- require 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>
    <!-- require MetingJS -->
    <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
    </head>
    <body>
    <meting-js server="netease" type="playlist" id="60198"></meting-js>
    </body>
</html>

解析

server="netease" type="playlist" id="60198"
选项默认描述
id(编号)require歌曲ID /播放列表ID /专辑ID /搜索关键字
server(平台)require音乐平台:netease,tencent,kugou,xiami,baidu
type(类型)requiresong,playlist,album,search,artist
auto(支持类种 类)options音乐链接,支持:netease,tencent,xiami
fixed(固定模式)false启用固定模式,默认false
mini(迷你模式)false启用迷你模式,默认false
autoplay(自动播放)false音频自动播放,默认false
theme(主题颜色)#2980b9默认#2980b9
loop(循环)all播放器循环播放,值:“all”,one”,“none”
order(顺序)list播放器播放顺序,值:“list”,“random”
preload(加载)auto值:“none”,“metadata”,“'auto”
volume(声量)0.7默认音量,请注意播放器会记住用户设置,用户自己设置音量后默认音量将不起作用
mutex(限制)true防止同时播放多个玩家,在该玩家开始播放时暂停其他玩家
lrc-type(歌词)0歌词显示
list-folded(列表折叠)false指示列表是否应该首先折叠
list-max-height(最大高度)340px列出最大高度
storage-name(储存名称)metingjs存储播放器设置的localStorage键

迷你版背景音乐

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>    
    <!-- require 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>
    <!-- require MetingJS -->
    <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
    </head>
    <body>
<meting-js 
    server="netease" 
    type="playlist" 
    id="60198"
    fixed="true" 
    autoplay="true"
    loop="all"
    order="random"
    preload="auto"
    list-folded="ture"
    list-max-height="500px"
    lrc-type="1">
</meting-js>
    </body>
</html>

播放本地音频文件

<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
  <title>musicPlay</title>
  <!-- require APlayer -->
  <link rel="stylesheet" href="./styles/APlayer.min.css">
  <script src="./scripts/APlayer.min.js"></script>
  <!-- require MetingJS -->
  <script src="./scripts/Meting.min.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="player"></div>
  <script>
    var musicPlay = new APlayer({
      element: document.getElementById('player'),//样式1
      autoplay: false,
      showlrc: true,
      audio: [
        {
          name: 'name1',
          artist: 'artist1',
          url: './821F0EAEABF4B8C1FA932FC808BBD195.mp3',
          cover: 'cover1.jpg',
          lrc: 'lrc1.lrc',
          theme: '#ebd0c2'
        },
        {
          name: 'name2',
          artist: 'artist2',
          url: './8DE6540969939C942348F512926C201D.mp3',
          cover: 'cover2.jpg',
          lrc: 'lrc2.lrc',
          theme: '#46718b'
        }
      ]
    });
    musicPlay.init();
  </script>
</body>
</html>
0

评论 (0)

取消