init

package.json

@@ -15,6 +15,7 @@
     "@liripeng/vue-audio-player": "^1.2.11",
     "@riophae/vue-treeselect": "0.4.0",
     "@sscfaith/avue-form-design": "1.3.12",
+    "aplayer": "^1.10.1",
     "avue-plugin-ueditor": "^0.1.4",
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",

src/main.js

@@ -19,14 +19,19 @@ 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

@@ -1,6 +1,6 @@
 <template>
   <div class="hello">
-    <div class="player">
+    <!-- <div class="player">
       {{ currentAudioName || audioList[0].name }}
       <audio-player
         ref="audioPlayer"
@@ -11,49 +11,78 @@
         theme-color="#ff2929"
         @playing="playing"
       />
-    </div>
+    </div> -->
+    <div id="aplayer"></div>
   </div>
 </template>
 
 <script>
+import "aplayer/dist/APlayer.min.css";
+import APlayer from "aplayer";
 export default {
   data() {
     return {
-      wavesurfer: {},
-      currentAudioName: "",
+      aplayer: null,
+      aplayerSpeedNum: "1", //点击字体更换
+      arr: [],
+      aplayerId: 0,
+      aplayerLength: 0,
       audioList: [
         {
           name: "音频1",
           url: "https://static.quhouse.com/audio/d7879fbcdfcc436189ce79e643e0aeb8.mp3",
         },
         {
-          name: '音频2',
-          url: 'https://static.quhouse.com/record/dev/2021-09-26/1632648911706-56129.mp3'
-        }
+          name: "音频2",
+          url: "https://static.quhouse.com/record/dev/2021-09-26/1632648911706-56129.mp3",
+        },
       ],
     };
   },
   methods: {
-    handleBeforePlay(next) {
-      // 这里可以做一些事情...
-      this.currentAudioName =
-        this.audioList[this.$refs.audioPlayer.currentPlayIndex].name;
-      console.log("我要开始播放了");
+    // handleBeforePlay(next) {
+    //   // 这里可以做一些事情...
+    //   this.currentAudioName =
+    //     this.audioList[this.$refs.audioPlayer.currentPlayIndex].name;
+    //   console.log("我要开始播放了");
 
-      next(); // 开始播放
-    },
-    playing(e) {
-      console.log("我播放中", this.$refs.audioPlayer.currentTime);
+    //   next(); // 开始播放
+    // },
+    // playing(e) {
+    //   console.log("我播放中", this.$refs.audioPlayer.currentTime);
+    // },
+    bofangchushihua() {
+      var that = this;
+      this.$nextTick(() => {
+        this.aplayer = new APlayer({
+          container: document.getElementById("aplayer"),
+          theme: "#2671E2",
+          audio: [
+            {
+              url: "https://static.quhouse.com/audio/d7879fbcdfcc436189ce79e643e0aeb8.mp3",
+              cover:"https://qufang.oss-cn-beijing.aliyuncs.com/recording/1626251359408.png",
+            }
+          ],
+        });
+        //结束的回调
+        this.aplayer.on("ended", function () {
+          console.log("player ended");
+        });
+        this.aplayer.on("timeupdate", function () {
+          // that.drawActive(that.aplayer.audio.currentTime * 1000);
+        });
+      });
     },
   },
-  mounted() {},
+  mounted() {
+    this.bofangchushihua();
+  },
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
-.player{
+.player {
   width: 30%;
   margin: 20px auto;
 }