91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue3中如何實現音頻播放器APlayer

發布時間:2022-08-04 13:54:45 來源:億速云 閱讀:1168 作者:iii 欄目:開發技術

這篇文章主要介紹了vue3中如何實現音頻播放器APlayer的相關知識,內容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇vue3中如何實現音頻播放器APlayer文章都會有所收獲,下面我們一起來看看吧。

實現效果:

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”這篇文章的內容就介紹到這里,感謝各位的閱讀!相信大家對“vue3中如何實現音頻播放器APlayer”知識都有一定的了解,大家如果還想學習更多知識,歡迎關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

遂昌县| 常宁市| 宣武区| 凤庆县| 南宁市| 桐柏县| 抚州市| 奉新县| 龙南县| 土默特右旗| 凭祥市| 济源市| 肥乡县| 葫芦岛市| 大庆市| 交城县| 瑞丽市| 天门市| 邹城市| 甘南县| 陆良县| 盐城市| 东兴市| 尚志市| 东阿县| 麻江县| 武邑县| 永修县| 五华县| 沅陵县| 息烽县| 张家川| 平舆县| 泸定县| 汶川县| 西华县| 灵璧县| 普陀区| 巴彦淖尔市| 额尔古纳市| 大名县|