精简部分播放器代码

src/views/api/aplayer/components/aplayer-controller-progress.vue

@@ -35,8 +35,8 @@ import { getElementViewLeft } from '../utils'
 import PlayerIcon from './aplayer-icon.vue'
 
 defineProps<{
-  loadProgress: number,
+  loadProgress: number
-  playProgress: number,
+  playProgress: number
   theme?: string
 }>()
 

src/views/api/aplayer/components/aplayer-controller-volume.vue

@@ -29,8 +29,8 @@ import IconButton from './aplayer-iconbutton.vue'
 import {getElementViewTop} from '../utils'
 
 const props = defineProps<{
-  volume: number,
+  volume: number
-  muted: boolean,
+  muted: boolean
   theme: string
 }>()
 const emit = defineEmits(['setvolume'])

src/views/api/aplayer/components/aplayer-controller.vue

@@ -51,13 +51,13 @@ import Volume from './aplayer-controller-volume.vue'
 import { StatType } from '@/model/api/music'
 
 const props = defineProps<{
-  shuffle: boolean,
+  shuffle: boolean
-  repeat: string,
+  repeat: string
-  stat: StatType,
+  stat: StatType
   theme: string
-  volume: number,
+  volume: number
-  muted: boolean,
+  muted: boolean
-  showList: boolean,
+  showList: boolean
   isMobile: boolean
 }>()
 const loadProgress = computed(() => {

src/views/api/aplayer/components/aplayer-list.vue

@@ -28,10 +28,10 @@ import { computed } from 'vue'
 import { MusicPlayerItem } from '@/model/api/music'
 
 const props = defineProps<{
-  show: boolean,
+  show: boolean
-  currentMusic: MusicPlayerItem,
+  currentMusic: MusicPlayerItem
-  musicList: MusicPlayerItem[],
+  musicList: MusicPlayerItem[]
-  theme?: string,
+  theme?: string
   listMaxHeight?: string
 }>()
 const listHeightStyle = computed(() => {

src/views/api/aplayer/components/aplayer-lrc.vue

@@ -21,7 +21,7 @@ import { parseLrc } from '../utils'
 import { StatType } from '@/model/api/music'
 
 const props = defineProps<{
-  lrcSource: string,
+  lrcSource: string
   playStat: StatType
 }>()
 

src/views/api/aplayer/components/aplayer-thumbnail.vue

@@ -18,8 +18,8 @@ import { computed, ref } from 'vue'
 import IconButton from './aplayer-iconbutton.vue'
 
 const props = withDefaults(defineProps<{
-  pic?: string,
+  pic?: string
-  theme?: string,
+  theme?: string
   playing: boolean
   enableDrag: boolean
 }>(), {

src/views/api/aplayer/vue-aplayer.vue

@@ -3,7 +3,7 @@
     class="aplayer"
     :class="{
       'aplayer-narrow': mini,
-      'aplayer-withlist' : !mini && musicList.length > 0,
+      'aplayer-withlist' : !mini && list.length > 0,
       'aplayer-withlrc': !mini && (!!$slots.display || showLrc),
       'aplayer-float': isFloatMode,
       'aplayer-loading': isPlaying && isLoading
@@ -52,7 +52,7 @@
     <music-list
       :show="showList && !mini"
       :current-music="currentMusic"
-      :music-list="musicList"
+      :music-list="list"
       :play-index="playIndex"
       :listMaxHeight="listMaxHeight"
       :theme="currentTheme"
@@ -146,7 +146,7 @@
 
       // Audio attributes as props
       // since 1.4.0
-      // autoplay controls muted preload volume
+      // autoplay muted preload volume
       // autoplay is not observable
 
       /**
@@ -158,18 +158,6 @@
         default: false,
       },
 
-      /**
-       * @since 1.4.0
-       * whether to show native audio controls below Vue-APlayer
-       * only work in development environment and not mini mode
-       *
-       * observable
-       */
-      controls: {
-        type: Boolean,
-        default: false,
-      },
-
       /**
        * @since 1.4.0
        * observable, sync
@@ -182,7 +170,10 @@
        * @since 1.4.0
        * observable
        */
-      preload: String,
+      preload: {
+        type: String,
+        default: 'none'
+      },
 
       /**
        * @since 1.4.0
@@ -266,6 +257,7 @@
         internalRepeat: this.repeat,
         // for shuffling
         shuffledList: [],
+        hls: null
       }
     },
     computed: {
@@ -296,13 +288,6 @@
         if (this.isMobile) return false
         return this.autoplay
       },
-      musicList () {
-        return this.list
-      },
-      shouldShowNativeControls () {
-        return process.env.NODE_ENV !== 'production' &&
-          this.controls && !this.mini
-      },
 
       // useful
 
@@ -337,9 +322,6 @@
           this.currentMusic = this.shuffledList[val % this.shuffledList.length]
         },
       },
-      shouldRepeat () {
-        return this.repeatMode !== REPEAT.NO_REPEAT
-      },
 
       // since 1.4.0
       // sync muted, volume
@@ -624,7 +606,6 @@
 
         // since 1.4.0 Audio attributes as props
 
-        this.audio.controls = this.shouldShowNativeControls
         this.audio.muted = this.muted
         this.audio.preload = this.preload
         this.audio.volume = this.volume
@@ -738,11 +719,7 @@
       },
 
       // since 1.4.0
-      // observe controls, muted, preload, volume
+      // observe muted, preload, volume
-
-      shouldShowNativeControls (val) {
-        this.audio.controls = val
-      },
       isAudioMuted (val) {
         this.audio.muted = val
       },
@@ -858,11 +835,6 @@
       }
     }
 
-    audio[controls] {
-      display: block;
-      width: 100%;
-    }
-
     // Mini mode
     &.aplayer-narrow {
       width: @aplayer-height;