''

app.wxss

@@ -381,4 +381,4 @@ button::after{
   color: #9C9C9D;
   padding: 75rpx 0;
   text-align: center;
-}
\ No newline at end of file
+}

business/pages/themeeditor/index.js

@@ -69,6 +69,7 @@ Page({
     audioStorage: {
 
     },
+    audiosrc: '',
     currentVoice: '', // 当前播放的录音
     voiceInterval: null,
     showWarn: false,
@@ -108,7 +109,26 @@ Page({
     successDailogShow: false
   },
   onLoad: function (options) { // Do some initialize when page load.
+    const that = this;
     this.innerAudioContext = wx.createInnerAudioContext(); // 当前页面唯一的一个音频容器
+    this.innerAudioContext.onTimeUpdate(() => {
+      const audiosrc = that.data.audiosrc;
+      if (that.data.audioStorage[`${audiosrc}`].loading) {
+        that.setData({
+          [`audioStorage.${that.data.audiosrc}.loading`]: false,
+        });
+      }
+    });
+    this.innerAudioContext.onWaiting(() => {
+      // this.audioStorage 
+      console.log(this.data.audioStorage, 'audioStorage');
+      that.setData({
+        [`audioStorage.${this.data.audiosrc}.loading`]: true,
+      });
+      // loading: false,
+      console.log(that.data.audiosrc, 'this.audiosrc');
+      console.log('不能播放');
+    });
     const {
       id,
       tid,
@@ -578,18 +598,19 @@ Page({
     })
   },
   playvoice(e) {
-    wx.showLoading({
-      title: '录音加载中',
-    })
-    setTimeout(function () {
-      wx.hideLoading()
-    }, 5000)
+    // wx.showLoading({
+    //   title: '录音加载中',
+    // })
+    // setTimeout(function () {
+    //   wx.hideLoading()
+    // }, 5000)
     const {
       value,
       duration
     } = e.detail;
 
     this.innerAudioContext.src = audioorigin(value);
+    this.data.audiosrc = value;
     this.innerAudioContext.obeyMuteSwitch = false;
     this.resetAudiosPlayStatus();
     clearInterval(this.data.voiceInterval);
@@ -598,7 +619,8 @@ Page({
       audioStorage[value] = {
         play: true,
         currentTime: 0,
-        duration
+        duration,
+        loading: false,
       }
     } else {
       if (audioStorage[value].currentTime == audioStorage[value].duration) {
@@ -610,12 +632,7 @@ Page({
     }
     this.innerAudioContext.seek(audioStorage[value].currentTime)
     this.innerAudioContext.play();
-    this.innerAudioContext.onPlay(
-      () => {
-        wx.hideLoading()
-        this.voiceIntervalPlay(value);
-      }
-    )
+    this.voiceIntervalPlay(value);
     this.setData({
       audioStorage,
     })
@@ -626,6 +643,7 @@ Page({
     } = e.detail;
     let audioStorage = this.data.audioStorage;
     audioStorage[value].play = false;
+    this.data.audiosrc = value;
     this.setData({
       audioStorage,
     })
@@ -639,11 +657,14 @@ Page({
       duration
     } = e.detail;
     let audioStorage = this.data.audioStorage;
+    this.data.audiosrc = value;
+    
     if (!audioStorage[value]) {
       audioStorage[value] = {
         play: false,
         currentTime: slide,
-        duration
+        duration,
+        loading: false,
       }
     } else {
       audioStorage[value].currentTime = slide;
@@ -652,24 +673,36 @@ Page({
     this.setData({
       audioStorage,
     })
+    if (this.data.audioStorage[`${this.data.audiosrc}`].loading) {
+      this.setData({
+        [`audioStorage.${this.data.audiosrc}.loading`]: false,
+      });
+    }
   },
   slidestart(e) {
     const {
       value,
       slide
     } = e.detail;
+    this.data.audiosrc = value;
     let audioStorage = this.data.audioStorage;
     if (audioStorage[value] && audioStorage[value].play) { // 如果当前是播放状态 则先暂停音乐盒计时器   播放按钮状态不需要改
       this.innerAudioContext.pause();
       clearInterval(this.data.voiceInterval);
     } else { // 如果当前不是播放状态  则该干嘛干嘛
     }
+    if (this.data.audioStorage[`${this.data.audiosrc}`].loading) {
+      this.setData({
+        [`audioStorage.${this.data.audiosrc}.loading`]: false,
+      });
+    }
   },
   slideend(e) {
     const {
       value,
       slide
     } = e.detail;
+    this.data.audiosrc = value;
     let audioStorage = this.data.audioStorage;
     if (audioStorage[value] && audioStorage[value].play) { // 如果当前是播放状态 则启用定时器   播放按钮状态不需要改
       // clearInterval(this.data.voiceInterval);
@@ -683,6 +716,11 @@ Page({
 
     } else { // 如果当前不是播放状态  则该干嘛干嘛
     }
+    if (this.data.audioStorage[`${this.data.audiosrc}`].loading) {
+      this.setData({
+        [`audioStorage.${this.data.audiosrc}.loading`]: false,
+      });
+    }
   },
   resetAudiosPlayStatus() { // 点击一个录音的时候把其他的录音状态改成暂停状态
     let audioStorage = this.data.audioStorage;

components/sjdmediaeditor/index.json

 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "w-loading": "../../dist/w-loading/index"
+  }
 }
\ No newline at end of file

components/sjdmediaeditor/index.wxml

@@ -16,30 +16,40 @@
             <image class="del-icon" data-type="{{item.type}}" data-index="{{index}}" data-value="{{item.value}}" src="{{imageRoot}}2b/common/reddelicon.png?{{imageVersion}}" lazy-load="false" binderror="" bindload=""  bindtap="delitem"></image>
             <image class="exchange-icon" wx:if="{{index != 0}}" data-type="{{item.type}}" data-index="{{index}}" bindtap="exchange" src="{{imageRoot}}2b/common/exchangeicon.png?{{imageVersion}}" lazy-load="false" binderror="" bindload=""></image>
             <view class="sjd-radio-box">
-                <!-- 播放的icon -->
                 <view
-                    class="play-btn"
-                    data-value="{{item.value}}"
-                    data-index="{{index}}"
-                    data-duration="{{item.duration}}"
-                    bindtap="playvoice"
-                    wx:if="{{!audioStorage[item.value] || !audioStorage[item.value].play}}"
+                    wx:if="{{!audioStorage[item.value] || !audioStorage[item.value].loading}}"
                 >
-                    <image class="play-btn-icon" src="{{imageRoot}}2b/common/playicon.png?{{imageVersion}}" ></image>
+                    <!-- 播放的icon -->
+                    <view
+                        class="play-btn"
+                        data-value="{{item.value}}"
+                        data-index="{{index}}"
+                        data-duration="{{item.duration}}"
+                        bindtap="playvoice"
+                        wx:if="{{!audioStorage[item.value] || !audioStorage[item.value].play}}"
+                    >
+                        <image class="play-btn-icon" src="{{imageRoot}}2b/common/playicon.png?{{imageVersion}}" ></image>
+                    </view>
+                    <!-- 播放的icon -->
+                    <!-- 暂停的icon -->
+                    <view
+                        class="pause-btn"
+                        wx:if="{{audioStorage[item.value] && audioStorage[item.value].play}}"
+                        data-value="{{item.value}}"
+                        data-index="{{index}}"
+                        data-duration="{{item.duration}}"
+                        bindtap="pausevoice"
+                    >
+                        <image class="pause-btn-icon" src="{{imageRoot}}2b/common/pauseicon.png?{{imageVersion}}" ></image>
+                    </view>
+                    <!-- 暂停的icon -->
                 </view>
-                <!-- 播放的icon -->
-                <!-- 暂停的icon -->
                 <view
-                    class="pause-btn"
-                    wx:if="{{audioStorage[item.value] && audioStorage[item.value].play}}"
-                    data-value="{{item.value}}"
-                    data-index="{{index}}"
-                    data-duration="{{item.duration}}"
-                    bindtap="pausevoice"
+                    wx:if="{{audioStorage[item.value] && audioStorage[item.value].loading}}"
+                    class="play-btn"
                 >
-                    <image class="pause-btn-icon" src="{{imageRoot}}2b/common/pauseicon.png?{{imageVersion}}" ></image>
+                    <view class="loading-icon"/>
                 </view>
-                <!-- 暂停的icon -->
                 <view class="play-time">
                     {{audioStorage[item.value] && filter.voiceTimeFormat(audioStorage[item.value].currentTime) || filter.voiceTimeFormat(0)}}
                 </view>

components/sjdmediaeditor/index.wxss

@@ -199,4 +199,12 @@
     z-index: 2;
     opacity: 0;
 }
+.loading-icon {
+    background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=") no-repeat;
+    background-size: 100% 100%;
+    animation: Rotate 1s steps(12, end) infinite;
+    -webkit-animation: Rotate 1s steps(12, end) infinite;
+    width: 60rpx;
+    height: 60rpx;
+  }
 @import "../../style/radio.wxss";
\ No newline at end of file