init

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@chenfengyuan/vue-qrcode": "^1.0.1",
+    "@liripeng/vue-audio-player": "^1.2.11",
     "@riophae/vue-treeselect": "0.4.0",
     "@sscfaith/avue-form-design": "1.3.12",
     "avue-plugin-ueditor": "^0.1.4",
@@ -30,6 +31,7 @@
     "sockjs-client": "1.0.0",
     "stomp-websocket": "2.3.4-next",
     "vue": "^2.6.10",
+    "vue-audio-player": "0.0.2",
     "vue-axios": "^2.1.2",
     "vue-clipboard2": "^0.3.0",
     "vue-cron": "^1.0.9",

src/main.js

@@ -19,11 +19,14 @@ import './styles/common.scss'
 import AvueFormDesign from '@sscfaith/avue-form-design'
 import basicContainer from './components/basic-container/main'
 import api from './api'
+import AudioPlayer from '@liripeng/vue-audio-player'
+import '@liripeng/vue-audio-player/lib/vue-audio-player.css'
 // 插件 json 展示
 Vue.use(router)
 
 Vue.use(AvueFormDesign);
 
+Vue.use(AudioPlayer)
 window.axios = axios
 Vue.use(VueAxios, axios)
 Vue.use(api) // 注册使用API模块

src/views/Receive/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="hello">
+    <div class="player">
+      {{ currentAudioName || audioList[0].name }}
+      <audio-player
+        ref="audioPlayer"
+        :show-prev-button="false"
+        :show-next-button="false"
+        :audio-list="audioList.map((elm) => elm.url)"
+        :before-play="handleBeforePlay"
+        theme-color="#ff2929"
+        @playing="playing"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      wavesurfer: {},
+      currentAudioName: "",
+      audioList: [
+        {
+          name: "音频1",
+          url: "https://static.quhouse.com/audio/d7879fbcdfcc436189ce79e643e0aeb8.mp3",
+        },
+        // {
+        //   name: '音频2',
+        //   url: 'https://www.0dutv.com/upload/dance/20200316/C719452E3C7834080007662021EA968E.mp3'
+        // }
+      ],
+    };
+  },
+  methods: {
+    handleBeforePlay(next) {
+      // 这里可以做一些事情...
+      this.currentAudioName =
+        this.audioList[this.$refs.audioPlayer.currentPlayIndex].name;
+      console.log("我要开始播放了");
+
+      next(); // 开始播放
+    },
+    playing(e) {
+      console.log("我播放中", this.$refs.audioPlayer.currentTime);
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+.player{
+  width: 30%;
+  margin: 20px auto;
+}
+</style>