画刊音频播放

src/views/bookShelf/components/MagazineSentence.vue

@@ -13,7 +13,7 @@
             </div>
         </div>
         <div class="content-inner" :style="{background:themeList[sentenceTheme].contentBg}">
-            <div v-for="(itemC,indexC) in data[sentenceActive].wordList" :key="indexC" :class="['content-item',indexC<=4?'active':'']" :style="{color:indexC<=4?themeList[sentenceTheme].sentenceActiveColor:themeList[sentenceTheme].sentenceColor,fontSize:fontSize+'px',lineHeight:fontSize+8+'px'}">
+            <div v-for="(itemC,indexC) in data[sentenceActive].wordList" :key="indexC" :class="['content-item',activeWordIndex===null&&currentTime*1000<=data[sentenceActive].e&&currentTime*1000>=data[sentenceActive].timeList[indexC].s||activeWordIndex===indexC?'active':'']" :style="{color:activeWordIndex===null&&currentTime*1000<=data[sentenceActive].e&&currentTime*1000>=data[sentenceActive].timeList[indexC].s||activeWordIndex===indexC?themeList[sentenceTheme].sentenceActiveColor:themeList[sentenceTheme].sentenceColor,fontSize:fontSize+'px',lineHeight:fontSize+8+'px'}" @click="palyWord(indexC)">
                 {{itemC}}
             </div>
         </div>
@@ -42,7 +42,7 @@
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: { },
-  props: ["fontSize","sentenceTheme","data","activeIndex"],
+  props: ["fontSize","sentenceTheme","data","activeIndex","mp3Url"],
   data() {
     //这里存放数据
     return {
@@ -117,7 +117,11 @@ export default {
                 themeActiveBorder:'#13392E',
                 boxBorder:'#fff', // 选中时高亮的外圈边框
             }
-        ]
+        ],
+        currentTime:0,
+        audio: new Audio(),
+        ed: null,
+        activeWordIndex: null
     }
   },
   //计算属性 类似于data概念
@@ -130,7 +134,35 @@ export default {
   methods: {
     // 播放、暂停
     handlePlay(){
-        this.isPlay = !this.isPlay
+        let _this = this
+        _this.activeWordIndex = null
+        _this.isPlay = !_this.isPlay
+        if(!_this.isPlay){
+            _this.audio.pause();
+            return
+        }
+        _this.audio.pause();
+        _this.audio.load();
+        _this.audio.src = _this.mp3Url;
+        if(_this.currentTime<=_this.data[_this.sentenceActive].s/1000){
+            _this.audio.currentTime = _this.data[_this.sentenceActive].s / 1000
+        }else{
+            _this.audio.currentTime = _this.currentTime
+        }
+        _this.ed = _this.data[_this.sentenceActive].e / 1000
+        _this.audio.loop = false;
+        _this.audio.play();
+    },
+    palyWord(index){
+        let _this = this
+        _this.activeWordIndex = index
+        _this.audio.pause();
+        _this.audio.load();
+        _this.audio.src = _this.mp3Url;
+        _this.audio.currentTime = _this.data[_this.sentenceActive].timeList[index].s/1000
+        _this.ed = _this.data[_this.sentenceActive].timeList[index].e / 1000
+        _this.audio.loop = false;
+        _this.audio.play();
     },
     // 关闭
     closeWord(){
@@ -139,12 +171,18 @@ export default {
     handlePage(type){
         if(type==='-'){
             if(this.sentenceActive>0){
+                this.audio.pause()
+                this.isPlay = false
+                this.currentTime = 0
                 this.sentenceActive--
             }else{
                 this.$message.warning('已经是第一句')
             }
         }else{
             if(this.sentenceActive<this.data.length-1){
+                this.audio.pause()
+                this.isPlay = false
+                this.currentTime = 0
                 this.sentenceActive++
             }else{
                 this.$message.warning('已经是最后一句')
@@ -166,7 +204,16 @@ export default {
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-
+    let _this = this
+    _this.audio.addEventListener("timeupdate", function () {
+        _this.currentTime = _this.audio.currentTime
+        const currentTime = _this.audio.currentTime;
+        if (_this.ed&&currentTime >= _this.ed) {
+            _this.audio.pause();
+            _this.isPlay = false
+            _this.currentTime = 0
+        }
+    });
   },
   //生命周期-创建之前
   beforeCreated() { },
@@ -235,6 +282,7 @@ export default {
             margin: 0 3px;
             font-size: 32px;
             line-height: 40px;
+            cursor: pointer;
             &.active{
                 font-weight: 700;
             }

src/views/bookShelf/magazineDetail.vue

@@ -64,7 +64,7 @@
         width="500px"
         class="login-dialog magazine-detail-dialog"
         v-if="mageazineDetailShow">
-        <magazine-sentence :fontSize="fontSize" :sentenceTheme="sentenceTheme" :data="magazineList[activePage].sentenceList" :activeIndex="mageazineDetailIndex" @closeWord="closeMagazineSentence" @changeTheme="changeTheme"></magazine-sentence>
+        <magazine-sentence :fontSize="fontSize" :sentenceTheme="sentenceTheme" :data="magazineList[activePage].sentenceList" :activeIndex="mageazineDetailIndex" @closeWord="closeMagazineSentence" @changeTheme="changeTheme" :mp3Url="art_sound_url"></magazine-sentence>
     </el-dialog>
   </div>
 </template>
@@ -109,7 +109,7 @@ export default {
               sentenceList:[
                     {
                         sentence:"I have a super ‘mouth’",
-                        wordList:['I','have','a','super.','‘mouth’'],
+                        wordList:['I','have','a','super','‘mouth’'],
                         s: 22500,
                         e: 25000,
                         timeList:[
@@ -137,7 +137,7 @@ export default {
                     },
                     {
                         sentence:"I am a shoebill (鲸头鹳). I live in Africa (非洲). I get my name because of my big bill (鸟喙). Does it look like a Dutch clog (荷兰木屐)?",
-                        wordList:['I','am','a','shoebill (鲸头鹳).','I','live',"in'","Africa (非洲).","I","get","my","name","because","of","my","big","bill (鸟喙).","Does","it","look","like","a","Dutch","clog (荷兰木屐)?"],
+                        wordList:['I','am','a','shoebill (鲸头鹳).','I','live',"in","Africa (非洲).","I","get","my","name","because","of","my","big","bill (鸟喙).","Does","it","look","like","a","Dutch","clog (荷兰木屐)?"],
                         s: 35000,
                         e: 47300,
                         timeList: [
@@ -241,7 +241,7 @@ export default {
                     },
                     {
                         sentence:"My bill is important. It helps me a lot.",
-                        wordList:['My','bill','is','important.','It','helps','me',"a'","lot."],
+                        wordList:['My','bill','is','important.','It','helps','me',"a","lot."],
                         s: 48000,
                         e: 52000,
                         timeList:[