|
@@ -28,33 +28,51 @@
|
|
|
}}</span
|
|
|
>
|
|
|
</template>
|
|
|
- <el-popover
|
|
|
- class="NNPE-popover"
|
|
|
- placement="bottom"
|
|
|
- width="446"
|
|
|
- trigger="hover"
|
|
|
- @show="showPopover(1)"
|
|
|
- @hide="hidePopover"
|
|
|
- v-if="audioData&&(audioData.script||audioData.translation)">
|
|
|
- <template slot="reference">
|
|
|
- <!-- <img v-if="activeIndex==1" class="icon_popover" src="../../../assets/NNPE/icon-popover-actiive.png"/>
|
|
|
+ <el-popover
|
|
|
+ class="NNPE-popover"
|
|
|
+ placement="bottom"
|
|
|
+ width="446"
|
|
|
+ trigger="hover"
|
|
|
+ @show="showPopover(1)"
|
|
|
+ @hide="hidePopover"
|
|
|
+ v-if="audioData && (audioData.script || audioData.translation)"
|
|
|
+ >
|
|
|
+ <template slot="reference">
|
|
|
+ <!-- <img v-if="activeIndex==1" class="icon_popover" src="../../../assets/NNPE/icon-popover-actiive.png"/>
|
|
|
<img v-else class="icon_popover" src="../../../assets/NNPE/icon-popover.png" /> -->
|
|
|
- </template>
|
|
|
- <div class="popover-content">
|
|
|
- <div class="popover-script" v-if="activeContent==1">
|
|
|
- {{audioData.script}}
|
|
|
- <div v-html="audioData.tinyscript" class="tiny-boxpopover-script"></div>
|
|
|
- </div>
|
|
|
- <div class="popover-script popover-translation" v-if="activeContent==2">
|
|
|
- {{audioData.translation}}
|
|
|
- <div v-html="audioData.tinytranslation" class="tiny-boxpopover-script"></div>
|
|
|
- </div>
|
|
|
- <div class="popover-bottom">
|
|
|
- <a :class="[activeContent==1?'active':'']" @click="activeContent=1">脚本</a>
|
|
|
- <a :class="[activeContent==2?'active':'']" @click="activeContent=2">译文</a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-popover>
|
|
|
+ </template>
|
|
|
+ <div class="popover-content">
|
|
|
+ <div class="popover-script" v-if="activeContent == 1">
|
|
|
+ {{ audioData.script }}
|
|
|
+ <div
|
|
|
+ v-html="audioData.tinyscript"
|
|
|
+ class="tiny-boxpopover-script"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="popover-script popover-translation"
|
|
|
+ v-if="activeContent == 2"
|
|
|
+ >
|
|
|
+ {{ audioData.translation }}
|
|
|
+ <div
|
|
|
+ v-html="audioData.tinytranslation"
|
|
|
+ class="tiny-boxpopover-script"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ <div class="popover-bottom">
|
|
|
+ <a
|
|
|
+ :class="[activeContent == 1 ? 'active' : '']"
|
|
|
+ @click="activeContent = 1"
|
|
|
+ >脚本</a
|
|
|
+ >
|
|
|
+ <a
|
|
|
+ :class="[activeContent == 2 ? 'active' : '']"
|
|
|
+ @click="activeContent = 2"
|
|
|
+ >译文</a
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
</div>
|
|
|
<div class="audioLine2" v-else>
|
|
|
<div
|
|
@@ -69,31 +87,43 @@
|
|
|
]"
|
|
|
@click="PlayAudio"
|
|
|
/>
|
|
|
- <el-popover
|
|
|
- class="NNPE-popover"
|
|
|
- placement="bottom"
|
|
|
- width="446"
|
|
|
- trigger="hover"
|
|
|
- @show="showPopover(1)"
|
|
|
- @hide="hidePopover"
|
|
|
- v-if="audioData&&(audioData.script||audioData.translation)">
|
|
|
- <template slot="reference">
|
|
|
- <!-- <img v-if="activeIndex==1" class="icon_popover" src="../../../assets/NNPE/icon-popover-actiive.png"/>
|
|
|
+ <el-popover
|
|
|
+ class="NNPE-popover"
|
|
|
+ placement="bottom"
|
|
|
+ width="446"
|
|
|
+ trigger="hover"
|
|
|
+ @show="showPopover(1)"
|
|
|
+ @hide="hidePopover"
|
|
|
+ v-if="audioData && (audioData.script || audioData.translation)"
|
|
|
+ >
|
|
|
+ <template slot="reference">
|
|
|
+ <!-- <img v-if="activeIndex==1" class="icon_popover" src="../../../assets/NNPE/icon-popover-actiive.png"/>
|
|
|
<img v-else class="icon_popover" src="../../../assets/NNPE/icon-popover.png" /> -->
|
|
|
- </template>
|
|
|
- <div class="popover-content">
|
|
|
- <div class="popover-script" v-if="activeContent==1">
|
|
|
- {{audioData.script}}
|
|
|
- </div>
|
|
|
- <div class="popover-script popover-translation" v-if="activeContent==2">
|
|
|
- {{audioData.translation}}
|
|
|
- </div>
|
|
|
- <div class="popover-bottom">
|
|
|
- <a :class="[activeContent==1?'active':'']" @click="activeContent=1">脚本</a>
|
|
|
- <a :class="[activeContent==2?'active':'']" @click="activeContent=2">译文</a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-popover>
|
|
|
+ </template>
|
|
|
+ <div class="popover-content">
|
|
|
+ <div class="popover-script" v-if="activeContent == 1">
|
|
|
+ {{ audioData.script }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="popover-script popover-translation"
|
|
|
+ v-if="activeContent == 2"
|
|
|
+ >
|
|
|
+ {{ audioData.translation }}
|
|
|
+ </div>
|
|
|
+ <div class="popover-bottom">
|
|
|
+ <a
|
|
|
+ :class="[activeContent == 1 ? 'active' : '']"
|
|
|
+ @click="activeContent = 1"
|
|
|
+ >脚本</a
|
|
|
+ >
|
|
|
+ <a
|
|
|
+ :class="[activeContent == 2 ? 'active' : '']"
|
|
|
+ @click="activeContent = 2"
|
|
|
+ >译文</a
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
</div>
|
|
|
<audio
|
|
|
:ref="audioId"
|
|
@@ -178,7 +208,7 @@ export default {
|
|
|
"audio.playing": {
|
|
|
handler(val) {
|
|
|
this.$emit("playChange", val);
|
|
|
- if (val) this.$emit("handleChangeStopAudio",this.audio.playing);
|
|
|
+ if (val) this.$emit("handleChangeStopAudio", this.audio.playing);
|
|
|
},
|
|
|
},
|
|
|
},
|
|
@@ -188,8 +218,7 @@ export default {
|
|
|
mounted() {
|
|
|
let _this = this;
|
|
|
let audioId = _this.audioId;
|
|
|
- _this.$refs[audioId].addEventListener("loadstart", function () {
|
|
|
- });
|
|
|
+ _this.$refs[audioId].addEventListener("loadstart", function () {});
|
|
|
_this.$refs[audioId].addEventListener("play", function () {
|
|
|
_this.audio.playing = true;
|
|
|
_this.audio.isPlaying = true;
|
|
@@ -197,8 +226,9 @@ export default {
|
|
|
});
|
|
|
_this.$refs[audioId].addEventListener("pause", function () {
|
|
|
_this.audio.playing = false;
|
|
|
+ _this.audio.isPlaying = false;
|
|
|
if (_this.hideSlider && _this.audio.currentTime + 0.5 > _this.ed) {
|
|
|
- _this.$emit("handleChangeStopAudio",false);
|
|
|
+ _this.$emit("handleChangeStopAudio", false);
|
|
|
}
|
|
|
_this.$emit("handleListenRead", false);
|
|
|
});
|
|
@@ -234,15 +264,19 @@ export default {
|
|
|
PlayAudio() {
|
|
|
let audioId = this.audioId;
|
|
|
let audio = document.getElementsByTagName("audio");
|
|
|
- if(audio&&audio.length>0&&window.location.href.indexOf('GCLS-Learn')==-1){
|
|
|
+ if (
|
|
|
+ audio &&
|
|
|
+ audio.length > 0 &&
|
|
|
+ window.location.href.indexOf("GCLS-Learn") == -1
|
|
|
+ ) {
|
|
|
audio.forEach((item) => {
|
|
|
- if (item.src == this.mp3) {
|
|
|
+ if (item.src == this.mp3) {
|
|
|
if (item.id !== audioId) {
|
|
|
- item.pause();
|
|
|
+ item.pause();
|
|
|
}
|
|
|
- } else {
|
|
|
+ } else {
|
|
|
item.pause();
|
|
|
- }
|
|
|
+ }
|
|
|
});
|
|
|
}
|
|
|
if (this.audio.playing) {
|
|
@@ -252,7 +286,7 @@ export default {
|
|
|
} else {
|
|
|
if (this.hideSlider) {
|
|
|
this.$refs[audioId].play();
|
|
|
- // this.onTimeupdateTime(this.bg);
|
|
|
+ // this.onTimeupdateTime(this.bg);
|
|
|
} else {
|
|
|
this.$refs[audioId].pause();
|
|
|
this.$refs[audioId].play();
|
|
@@ -260,7 +294,7 @@ export default {
|
|
|
this.audio.playing = true;
|
|
|
this.isClick = true;
|
|
|
}
|
|
|
- this.$emit("handleChangeStopAudio",this.audio.playing);
|
|
|
+ this.$emit("handleChangeStopAudio", this.audio.playing);
|
|
|
},
|
|
|
oncanplaythrough() {
|
|
|
let _this = this;
|
|
@@ -294,26 +328,25 @@ export default {
|
|
|
},
|
|
|
// 当音频当前时间改变后,进度条也要改变
|
|
|
onTimeupdate(res) {
|
|
|
- let _this = this
|
|
|
+ let _this = this;
|
|
|
let audioId = this.audioId;
|
|
|
this.audio.currentTime = res.target.currentTime;
|
|
|
this.getCurTime(res.target.currentTime);
|
|
|
this.playValue = (this.audio.currentTime / this.audio.maxTime) * 100;
|
|
|
if (this.type == "audioLine") {
|
|
|
- setTimeout(()=>{
|
|
|
- if (!_this.isClick && _this.audio.currentTime > _this.ed) {
|
|
|
- if(_this.$refs[audioId]){
|
|
|
- _this.$refs[audioId].pause();
|
|
|
- _this.$emit("emptyEd");
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- },50)
|
|
|
+ setTimeout(() => {
|
|
|
+ if (!_this.isClick && _this.audio.currentTime > _this.ed) {
|
|
|
+ if (_this.$refs[audioId]) {
|
|
|
+ _this.$refs[audioId].pause();
|
|
|
+ _this.$emit("emptyEd");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, 50);
|
|
|
} else {
|
|
|
if (this.hideSlider) {
|
|
|
if (this.audio.currentTime + 0.5 > this.ed) {
|
|
|
this.$refs[audioId].pause();
|
|
|
- this.$emit("handleChangeStopAudio",false);
|
|
|
+ this.$emit("handleChangeStopAudio", false);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -325,11 +358,11 @@ export default {
|
|
|
if (playFlag) {
|
|
|
let audio = document.getElementsByTagName("audio");
|
|
|
audio.forEach((item) => {
|
|
|
- if (item.id !== audioId) {
|
|
|
- item.pause();
|
|
|
- }
|
|
|
+ if (item.id !== audioId) {
|
|
|
+ item.pause();
|
|
|
+ }
|
|
|
});
|
|
|
-
|
|
|
+
|
|
|
this.$refs[audioId].play();
|
|
|
this.audio.playing = true;
|
|
|
}
|
|
@@ -369,13 +402,13 @@ export default {
|
|
|
}
|
|
|
return result;
|
|
|
},
|
|
|
- showPopover(e){
|
|
|
- this.activeIndex = e
|
|
|
+ showPopover(e) {
|
|
|
+ this.activeIndex = e;
|
|
|
+ },
|
|
|
+ hidePopover() {
|
|
|
+ this.activeIndex = null;
|
|
|
+ this.activeContent = 1;
|
|
|
},
|
|
|
- hidePopover(){
|
|
|
- this.activeIndex = null
|
|
|
- this.activeContent = 1
|
|
|
- }
|
|
|
},
|
|
|
// 生命周期-创建之前
|
|
|
beforeCreated() {},
|