裴大头-秦可爱

裴大头-秦可爱

更换音乐盒组件Aplayer+Metingjs

发表于 2021-07-05
裴大头
阅读量 347
更新于 2024-05-15

Aplayer

🍭 Wow, such a beautiful HTML5 music player(哇,好漂亮的HTML5音乐播放器) Aplayer是一个功能强大的HTML5音乐播放器 Aplayer官网文档:https://aplayer.js.org/#/

Metingjs

Metingjs基于Aplayer插件封装好的插件,开箱即用 Metingjs官网文档:https://github.com/metowolf/MetingJS

使用方法

一、html里

<!-- 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@2.0.1/dist/Meting.min.js"></script>

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

直接粘贴到html里即可,效果如下: image.png

二、Vue项目中

在index.html中添加依赖

<link href="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
html

在自定义组件中直接使用即可:

<template>
    <div id="music">
        <meting-js :autoplay="true"
                   :fixed="true"
                   :id="6819158597"
                   :mini="true"
                   :volume="0.4"
                   server="netease"
                   type="playlist"/>
    </div>
</template>

<script>
    export default {
        name: "music",
    }
</script>
js

配置参数

选项 默认值 描述
id(编号) require 歌曲ID /播放列表ID /专辑ID /搜索关键字
server(平台) require 音乐平台:netease(网易云),tencent(QQ音乐),kugou(酷狗),xiami(虾米),baidu(百度音乐)
type(类型) require song,playlist,album,search,artist
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键

网易云的歌单ID获取

image.png

推荐阅读

1、初始TypeScript 2、记录第一次vue3.0+vite+ts+ant 3、引入网易云音乐播放器卡片 4、vue项目集成腾讯滑块验证 5、Navicat Premium 15 永久破解激活工具及安装教程

关注公众号 #401px #146px

评论
来发一针见血的评论吧!
表情
  • 佐藤圣

    IP:莆田市

    2024-05-14 16:03

    vue报错没有注册咋整

    0
    回复
    • 裴大头

      男博主

      IP:济南市

      2024-05-15 16:53

      @佐藤圣看下index.html里引入的正确吗,文章中之前是图片,现在换成代码了,直接复制

      0
      回复
    • 佐藤圣

      IP:莆田市

      2024-05-14 16:57

      @佐藤圣metingjs

      0
      回复
    • 佐藤圣

      IP:莆田市

      2024-05-14 16:57

      @佐藤圣组件

      0
      回复
    • 共3条回复,点击查看
  • 小静

    2021-08-17 11:18

    大佬,如果使用@vue/cli构建的项目需要怎么添加依赖啊


    0
    回复
    • 裴大头

      男博主

      2021-08-17 11:24

      @小静

      cdn引入啊,上面说的就是啊,在你的脚手架的public里找到index.html,直接引入即可img


      0
      回复
    • 共1条回复,点击查看
推荐文章
  • Vue项目代码规范

    1点赞1评论

  • JavaScript 的事件循环机制

    1点赞1评论

  • 聊一聊我的文本编辑器

    1点赞11评论

  • JavaScript的常用遍历方法整理

    1点赞8评论

  • 前端面试精选-基础篇

    1点赞0评论

Crafted with by Pei你看雪

小破站居然运行了 865 天访客 23350

© 2023 Pei你看雪鲁ICP备19037910号-2