vue3+ts使用APlayer的示例代码

目录
  • 引言
  • 安装依赖
  • 代码
    • APlayer.Vue
    • player.ts
  • 效果图

引言

自己弄新版博客想用APlayer,到github看了一圈没见有vue3版本的,所以就用基于Aplayer组件化了下,顺带看了下Meting.js,用Meting.js的服务去获取指定歌曲,详见代码
参考:

https://github.com/DIYgod/APlayer
https://aplayer.js.org/#/zh-Hans/
https://github.com/metowolf/MetingJS

安装依赖

yarn add aplayer

代码

APlayer.Vue

<!--
 <!--
 * @Author: MK
 * @Date: 2021-12-16 15:41:47
 * @LastEditTime: 2021-12-24 11:17:45
 * @LastEditors: MK
 * @Description: APlayer组件化
 * @FilePath: \vue-mk-blog\src\components\APlayer.vue
-->
<template>
  <div ref="playerRef"></div>
</template>

<script lang="ts" setup>
import http from '@/api/http'
import APlayer from 'APlayer';
import 'APlayer/dist/APlayer.min.css';
import type {PropType} from '@vue/runtime-core';
import {nextTick, onBeforeUnmount, onMounted, ref} from 'vue'

const playerRef = ref()
let instance: APlayer;

// APlayer歌曲信息
class Audio {
  // 音频艺术家
  artist: String;
  // 音频名称
  name: String;
  // 音频链接
  url: String;
  // 音频封面
  cover: String;
  // 歌词
  lrc: String;

  constructor(artist: String, name: String, url: String, cover: String, lrc: String) {
    this.artist = artist;
    this.name = name;
    this.url = url;
    this.cover = cover;
    this.lrc = lrc;
  }
}

const props = defineProps({
  // 开启吸底模式
  fixed: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  // 开启迷你模式
  mini: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  // 音频自动播放
  autoplay: {
    type: Boolean as PropType<boolean>,
    default: false
  },
  // 主题色
  theme: {
    type: String as PropType<string>,
    default: 'rgba(255,255,255,0.2)'
  },
  // 音频循环播放
  loop: {
    type: String as PropType<'all' | 'one' | 'none'>,
    default: 'all'
  },
  // 音频循环顺序
  order: {
    type: String as PropType<'list' | 'random'>,
    default: 'random'
  },
  // 预加载
  preload: {
    type: String as PropType<'auto' | 'metadata' | 'none'>,
    default: 'auto'
  },
  // 默认音量
  volume: {
    type: Number as PropType<number>,
    default: 0.7,
    validator: (value: Number) => {
      return value >= 0 && value <= 1;
    }
  },
  // 歌曲服务器(netease-网易云, tencent-qq音乐, kugou-酷狗, xiami-小米音乐, baidu-百度音乐)
  songServer: {
    type: String as PropType<'netease' | 'tencent' | 'kugou' | 'xiami' | 'baidu'>,
    default: 'netease'
  },
  // 播放类型(song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家)
  songType: {
    type: String as PropType<string>,
    default: 'playlist'
  },
  // 歌的id
  songId: {
    type: String as PropType<string>,
    default: '19723756'
  },
  // 互斥,阻止多个播放器同时播放,当前播放器播放时暂停其他播放器
  mutex: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  // 传递歌词方式
  lrcType: {
    type: Number as PropType<number>,
    default: 3
  },
  // 列表是否默认折叠
  listFolded: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  // 列表最大高度
  listMaxHeight: {
    type: String as PropType<string>,
    default: '100px'
  },
  // 存储播放器设置的 localStorage key
  storageName: {
    type: String as PropType<string>,
    default: 'aplayer-setting'
  }
})

// 初始化
onMounted(() => {
  nextTick(() => {
    http.player.getSongSheet(props.songServer, props.songType, props.songId)
      .then(res => {
        let audioList = res.data.map(value => new Audio(value.author, value.title, value.url, value.pic, value.lrc));
        instance = new APlayer({
          container: playerRef.value,
          fixed: props.fixed,
          mini: props.mini,
          autoplay: props.autoplay,
          theme: props.theme,
          loop: props.loop,
          order: props.order,
          preload: props.preload,
          volume: props.volume,
          mutex: props.mutex,
          lrcType: props.lrcType,
          listFolded: props.listFolded,
          listMaxHeight: props.listMaxHeight,
          storageName: props.storageName,
          audio: audioList
        })
      })
  })
})
// 销毁
onBeforeUnmount(() => {
  instance.destroy()
})
</script>

player.ts

import axios from '@/utils/axios'
export class player {
   static getSongSheet(server: string, type:String, id: String) {
     return axios.get(`https://api.i-meto.com/meting/api?server=${server}&type=${type}&id=${id}&r=${Math.random()}`);
  }
}

效果图

到此这篇关于vue3+ts使用APlayer的文章就介绍到这了,更多相关vue3+ts使用APlayer内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue3中实现音频播放器APlayer的方法

    目录 前言: 官方: 实现步骤: 前言: vue2的时候,分享了一个很好用的插件是vue-aplayer,但是他是不支持vue3的,这里分享vue3使用APlayer来实现一个播放器的方法. 实现效果: 官方: git地址:点我 api地址:点我 实现步骤: 1.安装 npm: npm install aplayer --save Yarn: yarn add aplayer 2.页面中引入 import APlayer from 'APlayer'; import 'APlayer/dist/

  • vue3与ts组件封装提高代码复用性

    目录 引言 轮播图组件的封装 在pinia中发请求拿到数据 父组件中 在子组件中 引言 对于一名前端程序员来说封装组件是一个必备技能.当我们在日常的工作中总有所用的组件库满足不了需求的情况,这就需要我们有封装组件的基本功了. 封装组件,可以提高我们代码的复用性,提高工作效率,提高代码的可阅读性. 组件我自己的理解的话,分为两种吧,一种是工具类的组件,一种是页面级别的组件,工具类的组件就是说封装后,在以后的项目中如果用相同的应用场景时,可复用.页面类组件的话就是将一个大的页面分成很多的小组件,然后

  • Vue3中注册全局的组件,并在TS中添加全局组件提示方式

    目录 Vue3中注册全局的组件 Vue3踩坑--全局注册组件 我的框架:vue3+vite+ts+naiveUI Vue3中注册全局的组件 1. 在src/components中新建index.ts用来将所有需要全局注册的组件导入 : 如果使用的是 JS 可以删除类型校验 import type { Component } from 'vue' import SvgIcon from './SvgIcon/index.vue' // 如果使用的是 JS 可以删除类型校验 const compon

  • vue3中如何使用ts

    目录 如何使用ts app.vue header.vue list.vue listitem.vue footer.vue 如何使用ts 在创建vue脚手架的时候吧typescript选上 app.vue <template>   <!-- <div id="nav">     <router-link to="/">Home</router-link> |     <router-link to=&quo

  • vue3+ts使用APlayer的示例代码

    目录 引言 安装依赖 代码 APlayer.Vue player.ts 效果图 引言 自己弄新版博客想用APlayer,到github看了一圈没见有vue3版本的,所以就用基于Aplayer组件化了下,顺带看了下Meting.js,用Meting.js的服务去获取指定歌曲,详见代码参考: https://github.com/DIYgod/APlayerhttps://aplayer.js.org/#/zh-Hans/https://github.com/metowolf/MetingJS 安装

  • vue3.0生命周期的示例代码

    在组件化的框架中,比如Angular.React或Vue,都为组件定义了生命周期这个概念,每个组件实例在被创建时都要经过一系列的初始化过程,例如:需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时,在这个过程中也会运行一些叫做生命周期钩子的函数,它们提供给用户在组件的不同阶段添加自己的代码的机会. 使用过Vue2.x的朋友肯定对它的生命周期钩子很熟悉了,因为在实际的开发过程中我们多多少少会用到他们,比如 created.mounted.destoryed等等.

  • Vue3中使用pinia的示例代码

    目录 1.安装:npm install pinia 2.创建store文件并配置内部的index.js文件 3.main.js文件中配置 4.组件使用 4-1. store.$reset() 4-2 store.$patch 5.订阅修改 6.Getter 7.Actions 1.安装:npm install pinia 2.创建store文件并配置内部的index.js文件 import { defineStore } from 'pinia' //引入pinia //这里官网是单独导出 是可

  • Vue3实现九宫格抽奖的示例代码

    目录 前言 前期构思 具体实现 1.布局 2.指定奖品 3.抽奖 最终效果 前言 对象说晚饭吃什么太难选择,问我能不能做一个九宫格抽奖来决定我们晚上吃什么,emmm. 既然对象都开口了,不做也不行啊,最后给大家看一个简化版的(没有美工样式.编辑奖品这些) 前期构思 首先是布局,这个比较简单,用弹性布局(flex)就足够了,抽奖盒子固定宽高,奖品项为盒子的1/3,超过换行就行,转动方向是这样的: 抽奖方式主要分为两种,一种是随机抽取(完全随机),还有一种是指定奖品抽取(瞒着女朋友加的功能

  • Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现

    目录 写在前面 创建Vue3项目 开发规范 Vite配置 别名配置 环境变量 .env文件 定义环境变量 在vite.config.ts中获取环境变量 自动导入 NaiveUI的安装 写在最后 写在前面 现在已经有很多项目团队使用Vue3+TS进行开发,同时也就意味着Vue3的生态越来越完善,如果还是停留在Vue2的阶段已经out了,这篇文章将会使用Vue3+TS+NaivaUI搭建一个简单的项目骨架. 创建Vue3项目 首先我们通过Vite来创建一个Vue3+TS的一个项目,打开终端,找到我们

  • Vue3+TS实现语音播放组件的示例代码

    目录 第一步:点击拖拽进度条 第二步:操作媒体音频 第三步:进度条和播放进度关联 完整代码 该功能将使用vue3 + TS来实现语音播放组件,使用什么技术不重要,重要的是看懂了核心逻辑后,通过原生js.react.vue2等都可以轻松实现 所涉及到重要点有以下几个: (1)进度条的实现:拖拽进度条.点击进度条 (2)操作audio语音播放:通过js操作audio媒体 (3)播放进度与进度条紧密关联:播放的进度改变时,进度条也随之改变:进度条改变时,播放的进度也随之改变 效果图: 开始我们的设计吧

  • vue3+ts使用bus事件总线的示例代码

    1.在vue2中我是这样使用的 //创建一个vueBus.js import Bus from 'vue'; let install = function (Vue) { Vue.prototype.$bus = new Bus() } export default { install }; //在main.js中引入 import vueBus from '@/utils/vueBus'; Vue.use(vueBus); //可根据this.$bus._events['事件名'] 来查看是否

  • 使用Vue3实现一个Upload组件的示例代码

    通用上传组件开发 开发上传组件前我们需要了解: FormData上传文件所需API dragOver文件拖拽到区域时触发 dragLeave文件离开拖动区域 drop文件移动到有效目标时 首先实现一个最基本的上传流程: 基本上传流程,点击按钮选择,完成上传 代码如下: <template> <div class="app-container"> <!--使用change事件--> <input type="file" @ch

  • Vue3实现刷新页面局部内容的示例代码

    目录 第一步:定义状态标识 第二步.借用v-if 指令让dom节点重新渲染 第三步.修改isRouterAlive 值,实现dom的重新渲染 想要实现页面的局部刷新,我们只需要实现局部组件(dom)的重新渲染.在Vue中,想要实现这一效果最简便的方式方法就是使用v-if 指令. 在Vue2中我们除了使用v-if 指令让局部dom的重新渲染,也可以新建一个空白组件,需要刷新局部页面时跳转至这个空白组件页面,然后在空白组件内的beforeRouteEnter 守卫中又跳转回原来的页面. 如下图所示,

  • 使用Vue3+ts 开发ProTable源码教程示例

    目录 前台实现 实现效果 技术栈 使用方法 ProTable 设计思路 编码风格 css 小知识 表格操作 小结 后期功能扩展 后台实现 数据库 mysql 新建项目 RESTful 风格的 URL 定义 Sequelize controller model router.js API 文档 Apifox ts用到的一些 前台实现 实现效果 技术栈 vue3 + typescript + element-plus 使用方法 <template> <el-tabs type="b

随机推荐