新增音频播放测试

hookehuyr
Commit 0c24acf29dd85bcb8fefd17bbc8864f337a60884 0c24acf2 1 parent a3acbbe4
Showing 2 changed files with 62 additions and 9 deletions
src/components/InfoWindow.vue
src/views/index.vue
--- a/src/components/InfoWindow.vue
View file @0c24acf
+++ b/src/components/InfoWindow.vue
View file @0c24acf
@@ -5,19 +5,29 @@
         <div class="popup-content" style="height: 13.5rem;">
           <div style="position: relative;">
             <h3 class="view-name">三宝楼</h3>
-            <van-icon @click="close" name="cross" size="1.25rem" style="position: absolute; right: 0.75rem; top: 0.75rem;" />
+            <van-icon @click="close" name="cross" size="1.25rem"
+              style="position: absolute; right: 0.75rem; top: 0.75rem;" />
           </div>
           <img class="view-photo"
             src="https://img0.baidu.com/it/u=3974116483,397969091&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=496">
           <p class="introduction" style="padding: 0.5rem; padding-bottom: 0;">尊敬的游客朋友们您好，欢迎来到西园寺，您现在所到的地方是“三宝楼......</p>
-          <div class="control-play"><span></span></div>
+          <div v-if="!is_play" @click="play()" class="control-play" style="text-align: center;">
-          <div @click="showDetail" class="show-details" style="color: white; text-align: center; line-height: 3rem;">详情</div>
+            <van-icon name="play-circle-o" size="2rem" color="#FFF" style="margin-top: 0.5rem;" />
           </div>
+          <div v-else @click="pause()" class="control-play" style="text-align: center;">
+            <van-icon name="pause-circle-o" size="2rem" color="#FFF" style="margin-top: 0.5rem;" />
           </div>
+          <div @click="showDetail" class="show-details" style="color: white; text-align: center; line-height: 3rem;">详情
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="leaflet-popup-tip-container" style="left: 50%; position: relative;">
+      <div class="leaflet-popup-tip"></div>
     </div>
-    <div class="leaflet-popup-tip-container" style="left: 50%; position: relative;"><div class="leaflet-popup-tip"></div></div>
-    <van-popup teleport="body" v-model:show="show_popup" position="bottom" :overlay="true" :style="{ padding: '1rem', height: '100%' }">
+    <van-popup teleport="body" v-model:show="show_popup" position="bottom" :overlay="true"
+      :style="{ padding: '1rem', height: '100%' }">
       <van-icon name="cross" size="1.35rem" @click="show_popup = false" style="float: right; color: gray;" />
       <div class="popup-wrapper">
         <div class="title">
@@ -34,6 +44,7 @@
 </template>
 <script>
+
 export default {
   props: {
     infoWindow: {
@@ -45,12 +56,15 @@ export default {
       default: ''
     }
   },
-  data () {
+  data() {
     return {
       show_popup: false,
       popup_title: '',
       popup_content: '',
       video_src: '',
+      ind: '',
+      is_play: false,
+      audio: new Audio()
     }
   },
   methods: {
@@ -58,12 +72,51 @@ export default {
     close() {
       // 高德地图信息窗关闭的api
       this.infoWindow.close()
+      // 处理音频
+      this.voice_pause();
+      this.audio.currentTime = 0
     },
-    showDetail () {
+    showDetail() {
       this.show_popup = true;
       this.popup_title = '三宝楼';
       this.popup_content = '尊敬的游客朋友们您好，欢迎来到西园寺，您现在所到的地方是“三宝楼......';
       this.video_src = 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4'
+    },
+    play () {
+      this.voice_play('https://file.365daoyou.cn/mimi-001_1505799708494-k3xkyzv8', 0)
+    },
+    pause () {
+      this.voice_pause()
+    },
+    // 声音播放
+    voice_play(src, index) {
+      this.audio.src = src
+      if (this.ind) {
+        // audio.pause(); //暂停
+        this.audio.currentTime = 0
+        this.ind = 0
+        return
+      }
+      this.ind = index
+      let play_status = this.audio.play() // 播放
+      if (play_status) {
+        this.is_play = true;
+        play_status.then(() => {
+          // 音频加载成功
+          // 音频的播放需要耗时
+          console.log(this.audio.duration)
+          setTimeout(() => { // 后续操作(同为播放完成)
+            this.ind = 0
+          }, this.audio.duration * 1000) // audio.duration 为音频的时长单位为秒
+        }).catch((e) => {
+          // 失败
+          console.log('Operation is too fast, audio play fails')
+        })
+      }
+    },
+    voice_pause () {
+      this.audio.pause();
+      this.is_play = false;
     }
   }
 }
--- a/src/views/index.vue
View file @0c24acf
+++ b/src/views/index.vue
View file @0c24acf
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-05-31 14:05:43
+ * @LastEditTime: 2023-05-31 15:25:25
  * @FilePath: /map-demo/src/views/index.vue
  * @Description: 文件描述
 -->
 <template>
   <div style="height: 100vh; position: relative; overflow: hidden;">
     <div id="container"></div>
-    <div id="abc" class="nav-bar-wrapper">
+    <div class="nav-bar-wrapper">
       <div class="hideScrollBar"
         style="display: flex; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; position: relative;">
         <div style="width: 30%; flex-shrink: 0; padding-top: 1rem;" :class="[isActive === 0 ? 'checked' : '', 'item']"