首页 > web前端 > Vue.js > 正文

vue3中如何实现音频播放器APlayer

王林
发布: 2023-05-26 08:28:07
转载
2218人浏览过

实现效果:

vue3中如何实现音频播放器aplayer

实现步骤:

1、安装 npm:

npm install aplayer --save
登录后复制

Yarn:

yarn add aplayer
登录后复制

2、页面中引入

import APlayer from 'APlayer';
import 'APlayer/dist/APlayer.min.css';
登录后复制

3、具体使用,源代码

立即学习前端免费学习笔记(深入)”;

(1)封装 aPlayer.vue

<template>
  <div class="mainPage" ref="playerRef"></div>
</template>
<script setup>
  import APlayer from 'APlayer';
  import 'APlayer/dist/APlayer.min.css';
  import {reactive,nextTick, onBeforeUnmount,getCurrentInstance, onMounted, ref} from 'vue'
 
  const playerRef = ref()
  const { proxy } = getCurrentInstance()
  const state = reactive({
    instance:null
  })
 
  // APlayer歌曲信息
  class Audio {
    // 音频艺术家
    // artist: String;
    // 音频名称
    // name: String;
    // 音频链接
    // url: String;
    // 音频封面
    // cover: String;
    // 歌词
    // lrc: String;
 
    constructor(artist, name, url, cover, lrc) {
      this.artist = artist;
      this.name = name;
      this.url = url;
      this.cover = cover;
      this.lrc = lrc;
    }
  }
 
  const props = defineProps({
    // 开启吸底模式
    fixed: {
      type: Boolean,
      default: false
    },
    // 开启迷你模式
    mini: {
      type: Boolean,
      default: false
    },
    // 音频自动播放
    autoplay: {
      type: Boolean,
      default: false
    },
    // 主题色
    theme: {
      type: String,
      default: 'rgba(255,255,255,0.2)'
    },
    // 音频循环播放
    loop: {
      type: String,
      default: 'all' //'all' | 'one' | 'none'
    },
    // 音频循环顺序
    order: {
      type: String,
      default: 'random' //'list' | 'random'
    },
    // 预加载
    preload: {
      type: String,
      default: 'auto' //'auto' | 'metadata' | 'none'
    },
    // 默认音量
    volume: {
      type: Number,
      default: 0.7,
      validator: (value) => {
        return value >= 0 && value <= 1;
      }
    },
    // 歌曲服务器(netease-网易云, tencent-qq音乐, kugou-酷狗, xiami-小米音乐, baidu-百度音乐)
    songServer: {
      type: String,
      default: 'netease' //'netease' | 'tencent' | 'kugou' | 'xiami' | 'baidu'
    },
    // 播放类型(song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家)
    songType: {
      type: String,
      default: 'playlist'
    },
    // 歌的id
    songId: {
      type: String,
      default: '19723756'
    },
    // 互斥,阻止多个播放器同时播放,当前播放器播放时暂停其他播放器
    mutex: {
      type: Boolean,
      default: true
    },
    // 传递歌词方式
    lrcType: {
      type: Number,
      default: 3
    },
    // 列表是否默认折叠
    listFolded: {
      type: Boolean,
      default: true
    },
    // 列表最大高度
    listMaxHeight: {
      type: String,
      default: '100px'
    },
    // 存储播放器设置的 localStorage key
    storageName: {
      type: String,
      default: 'aplayer-setting'
    }
  })
  onMounted(() => {
    let str = {
      server:props.songServer,
      type:props.songType,
      id:props.songId
    }
    proxy.$api.common.getSongSheet(str).then(res=>{
      let audioList = res.data.map(value => new Audio(value.author, value.title, value.url, value.pic, value.lrc));
      state.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(() => {
      state.instance.destroy()
    })
  })
</script>
 
<style lang='scss' scoped>
  .mainPage{
    @include wh(100%,auto);
    background: #FCFCFC;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
 
  }
</style>
登录后复制

(2)父组件调用

 <a-player></a-player>
登录后复制

以上就是vue3中如何实现音频播放器APlayer的详细内容,更多请关注php中文网其它相关文章!

PotPlayer播放器
PotPlayer播放器

potplayer是一款功能全面的视频播放器,支持各种格式的音频文件,内置了非常强大的解码器功能,能够非常流畅的观看,有需要的小伙伴快来保存下载体验吧!

下载
来源:亿速云网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号