|
|
@@ -0,0 +1,476 @@
|
|
|
+<template>
|
|
|
+ <div :class="['Audio', 'AudioFull']">
|
|
|
+ <div
|
|
|
+ :class="['audioLine3', bgIndex == 1 ? 'audioLine3-green' : '']"
|
|
|
+ @click="hasSelectedCell ? parentPalyAudio() : PlayAudio()"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="play"
|
|
|
+ :class="[
|
|
|
+ audio.loading ? 'loadBtn' : audio.playing ? 'playBtn' : 'pauseBtn',
|
|
|
+ ]"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <audio
|
|
|
+ :id="audioId"
|
|
|
+ :ref="audioId"
|
|
|
+ :src="mp3"
|
|
|
+ preload="meta"
|
|
|
+ @loadedmetadata="onLoadedmetadata"
|
|
|
+ @timeupdate="onTimeupdate"
|
|
|
+ @canplaythrough="oncanplaythrough"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ props: [
|
|
|
+ "mp3",
|
|
|
+ "bgIndex",
|
|
|
+ "getCurTime",
|
|
|
+ "stopAudio",
|
|
|
+ "width",
|
|
|
+ "isRepeat",
|
|
|
+ "themeColor",
|
|
|
+ "hideSlider",
|
|
|
+ "ed",
|
|
|
+ "bg",
|
|
|
+ "audioId",
|
|
|
+ "type",
|
|
|
+ "hasSelectedCell",
|
|
|
+ ],
|
|
|
+ data() {
|
|
|
+ // 这里存放数据
|
|
|
+ return {
|
|
|
+ playValue: 0,
|
|
|
+ audio: {
|
|
|
+ // 该字段是音频是否处于播放状态的属性
|
|
|
+ playing: false,
|
|
|
+ // 音频当前播放时长
|
|
|
+ currentTime: 0,
|
|
|
+ // 音频最大播放时长
|
|
|
+ maxTime: 0,
|
|
|
+ isPlaying: false,
|
|
|
+ loading: false,
|
|
|
+ },
|
|
|
+ audioAllTime: null, // 展示总时间
|
|
|
+ duioCurrentTime: null, // 剩余时间
|
|
|
+ count: 0,
|
|
|
+ loading: null,
|
|
|
+ isClick: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // 计算属性 类似于data概念
|
|
|
+ computed: {
|
|
|
+ sliderWidth() {
|
|
|
+ let width = 0;
|
|
|
+ if (this.width) {
|
|
|
+ width = this.width;
|
|
|
+ } else {
|
|
|
+ width = 662;
|
|
|
+ }
|
|
|
+ return width;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 监控data中数据变化
|
|
|
+ watch: {
|
|
|
+ stopAudio: {
|
|
|
+ handler(val) {
|
|
|
+ if (val) {
|
|
|
+ this.$refs[this.audioId].pause();
|
|
|
+ this.audio.playing = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ "audio.playing": {
|
|
|
+ handler(val) {
|
|
|
+ this.$emit("playChange", val);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ let audioId = this.audioId;
|
|
|
+ this.$refs[audioId].addEventListener("loadstart", () => {});
|
|
|
+ this.$refs[audioId].addEventListener("play", () => {
|
|
|
+ this.audio.playing = true;
|
|
|
+ this.audio.isPlaying = true;
|
|
|
+ this.audio.loading = false;
|
|
|
+ });
|
|
|
+ this.$refs[audioId].addEventListener("pause", () => {
|
|
|
+ this.audio.playing = false;
|
|
|
+ if (this.hideSlider && this.audio.currentTime * 1000 + 500 > this.ed) {
|
|
|
+ this.$emit("sentPause", true);
|
|
|
+ }
|
|
|
+ this.$emit("handleListenRead", false);
|
|
|
+ });
|
|
|
+ this.$refs[audioId].addEventListener("ended", () => {
|
|
|
+ this.audio.playing = false;
|
|
|
+ this.audio.isPlaying = false;
|
|
|
+ this.$emit("handleListenRead", false);
|
|
|
+ this.isClick = false;
|
|
|
+ });
|
|
|
+
|
|
|
+ this.$nextTick(() => {
|
|
|
+ document
|
|
|
+ .getElementsByClassName("el-slider__button-wrapper")[0]
|
|
|
+ .addEventListener("mousedown", () => {
|
|
|
+ this.$refs[audioId].pause();
|
|
|
+ this.audio.playing = false;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ parentPalyAudio() {
|
|
|
+ if (this.hasSelectedCell) {
|
|
|
+ return this.$emit("parentPlayAudio");
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ PlayAudio() {
|
|
|
+ let audioId = this.audioId;
|
|
|
+ let audio = document.getElementsByTagName("audio");
|
|
|
+ audio.forEach(item => {
|
|
|
+ if (item.src == this.mp3) {
|
|
|
+ if (item.id !== audioId) {
|
|
|
+ item.pause();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ item.pause();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ let video = document.getElementsByTagName("video");
|
|
|
+ video.forEach(vItem => {
|
|
|
+ vItem.pause();
|
|
|
+ });
|
|
|
+
|
|
|
+ if (this.audio.playing) {
|
|
|
+ this.$refs[audioId].pause();
|
|
|
+ this.audio.playing = false;
|
|
|
+ this.$emit("handleListenRead", false);
|
|
|
+ this.isClick = false;
|
|
|
+ } else {
|
|
|
+ if (this.count == 0) {
|
|
|
+ this.audio.loading = true;
|
|
|
+ this.count++;
|
|
|
+ }
|
|
|
+ if (this.hideSlider) {
|
|
|
+ this.$refs[audioId].play();
|
|
|
+ this.onTimeupdateTime(this.bg / 1000);
|
|
|
+ } else {
|
|
|
+ this.$refs[audioId].play();
|
|
|
+ }
|
|
|
+ this.$emit("handleChangeStopAudio");
|
|
|
+ this.$emit("handleListenRead", true);
|
|
|
+ this.isClick = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ oncanplaythrough() {
|
|
|
+ // setTimeout(() => {
|
|
|
+ this.audio.loading = false;
|
|
|
+
|
|
|
+ // }, 10000);
|
|
|
+ },
|
|
|
+ // 点击 拖拽播放音频
|
|
|
+ changeCurrentTime(value) {
|
|
|
+ let audioId = this.audioId;
|
|
|
+ this.$refs[audioId].play();
|
|
|
+ this.audio.playing = true;
|
|
|
+ this.$refs[audioId].currentTime = parseInt(
|
|
|
+ (value / 100) * this.audio.maxTime
|
|
|
+ );
|
|
|
+ },
|
|
|
+ mousedown() {
|
|
|
+ let audioId = this.audioId;
|
|
|
+ this.$refs[audioId].pause();
|
|
|
+ this.audio.playing = false;
|
|
|
+ },
|
|
|
+ // 进度条格式化toolTip
|
|
|
+ formatProcessToolTip(index) {
|
|
|
+ return this.realFormatSecond(
|
|
|
+ parseInt((this.audio.maxTime / 100) * index)
|
|
|
+ );
|
|
|
+ },
|
|
|
+ // 音频加载完之后
|
|
|
+ onLoadedmetadata(res) {
|
|
|
+ this.audio.maxTime = parseInt(res.target.duration);
|
|
|
+ this.audioAllTime = this.realFormatSecond(this.audio.maxTime);
|
|
|
+ },
|
|
|
+ // 当音频当前时间改变后，进度条也要改变
|
|
|
+ onTimeupdate(res) {
|
|
|
+ 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") {
|
|
|
+ if (!this.isClick && this.audio.currentTime * 1000 > this.ed) {
|
|
|
+ this.$refs[audioId].pause();
|
|
|
+ this.$emit("emptyEd");
|
|
|
+ }
|
|
|
+ } else if (this.audio.currentTime * 1000 > this.ed) {
|
|
|
+ this.$refs[audioId].pause();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onTimeupdateTime(res, playFlag) {
|
|
|
+ if (!res) return;
|
|
|
+ let audioId = this.audioId;
|
|
|
+ this.$refs[audioId].currentTime = res;
|
|
|
+ this.playValue = (res / this.audio.maxTime) * 100;
|
|
|
+ if (playFlag) {
|
|
|
+ let audio = document.getElementsByTagName("audio");
|
|
|
+ audio.forEach(item => {
|
|
|
+ if (item.id !== audioId) {
|
|
|
+ item.pause();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.$refs[audioId].play();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 将整数转换成 时：分：秒的格式
|
|
|
+ realFormatSecond(value) {
|
|
|
+ let theTime = parseInt(value); // 秒
|
|
|
+ let theTime1 = 0; // 分
|
|
|
+ let theTime2 = 0; // 小时
|
|
|
+ if (theTime > 60) {
|
|
|
+ theTime1 = parseInt(theTime / 60);
|
|
|
+ theTime = parseInt(theTime % 60);
|
|
|
+ if (theTime1 > 60) {
|
|
|
+ theTime2 = parseInt(theTime1 / 60);
|
|
|
+ theTime1 = parseInt(theTime1 % 60);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let result = String(parseInt(theTime));
|
|
|
+ if (result < 10) {
|
|
|
+ result = "0" + result;
|
|
|
+ }
|
|
|
+ if (theTime1 > 0) {
|
|
|
+ result = String(parseInt(theTime1)) + ":" + result;
|
|
|
+ if (theTime1 < 10) {
|
|
|
+ result = "0" + result;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ result = "00:" + result;
|
|
|
+ }
|
|
|
+ if (theTime2 > 0) {
|
|
|
+ result = String(parseInt(theTime2)) + ":" + result;
|
|
|
+ if (theTime2 < 10) {
|
|
|
+ result = "0" + result;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // result = "00:" + result;
|
|
|
+ }
|
|
|
+ return result;
|
|
|
+ },
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.AudioFull {
|
|
|
+ .audioLine {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ background: #ffffff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ &-green {
|
|
|
+ background: 0 0;
|
|
|
+ }
|
|
|
+ .play {
|
|
|
+ margin-right: 12px;
|
|
|
+ margin-left: 8px;
|
|
|
+ width: 16px;
|
|
|
+ min-width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 19px;
|
|
|
+ color: #000;
|
|
|
+ margin-left: 8px;
|
|
|
+ margin-right: 12px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: right;
|
|
|
+ &.color-white {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .audioLine2 {
|
|
|
+ .play-icon {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ &.playBtn-icon {
|
|
|
+ background: url("../../../assets/icon/pauseC-16-normal-red.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ &.pauseBtn-icon {
|
|
|
+ background: url("../../../assets/NPC/compare-pause-red.png") no-repeat
|
|
|
+ left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .loadBtn {
|
|
|
+ background: url("../../../assets/NPC/loading-red.png") no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .audioLine3 {
|
|
|
+ width: 56px;
|
|
|
+ height: 56px;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 40px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .play {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ &.playBtn {
|
|
|
+ background: url("../../../assets/icon/pause-24-normal-red.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ &.pauseBtn {
|
|
|
+ background: url("../../../assets/icon/play-24-normal-red.png") no-repeat
|
|
|
+ left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-green {
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ .play {
|
|
|
+ &.playBtn {
|
|
|
+ background: url("../../../assets/icon/pause-24-normal-yellow.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ &.pauseBtn {
|
|
|
+ background: url("../../../assets/icon/play-24-normal-yellow.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.Audio {
|
|
|
+ .el-slider__bar {
|
|
|
+ height: 2px;
|
|
|
+ background: #de4444;
|
|
|
+ }
|
|
|
+ .el-slider__button {
|
|
|
+ background: #de4444;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .el-slider__button-wrapper {
|
|
|
+ width: 25px;
|
|
|
+ }
|
|
|
+ .el-slider__button-wrapper {
|
|
|
+ position: relative;
|
|
|
+ z-index: 0;
|
|
|
+ }
|
|
|
+ .el-slider__button {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ top: 12px;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ .el-slider__runway {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ background: #e5e5e5;
|
|
|
+ border-radius: 0px;
|
|
|
+ height: 2px;
|
|
|
+ }
|
|
|
+ .el-slider {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+}
|
|
|
+.NPC-Book-Sty {
|
|
|
+ .Audio {
|
|
|
+ .el-slider__bar {
|
|
|
+ height: 2px;
|
|
|
+ background: #de4444;
|
|
|
+ }
|
|
|
+ .el-slider__button {
|
|
|
+ background: #de4444;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.NPC-Big-Book-preview-green {
|
|
|
+ .Audio {
|
|
|
+ .el-slider__bar {
|
|
|
+ background: #24b99e !important;
|
|
|
+ }
|
|
|
+ .el-slider__button {
|
|
|
+ background: #24b99e !important;
|
|
|
+ }
|
|
|
+ .audioLine2 {
|
|
|
+ .play-icon {
|
|
|
+ &.playBtn-icon {
|
|
|
+ background: url("../../../assets/icon/pauseC-16-normal-Green.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ &.pauseBtn-icon {
|
|
|
+ background: url("../../../assets/NPC/compare-pause-green.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .loadBtn {
|
|
|
+ background: url("../../../assets/NPC/loading-green.png") no-repeat left
|
|
|
+ top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.NPC-Big-Book-preview-brown {
|
|
|
+ .Audio {
|
|
|
+ .el-slider__bar {
|
|
|
+ background: #bd8865 !important;
|
|
|
+ }
|
|
|
+ .el-slider__button {
|
|
|
+ background: #bd8865 !important;
|
|
|
+ }
|
|
|
+ .audioLine2 {
|
|
|
+ .play-icon {
|
|
|
+ &.playBtn-icon {
|
|
|
+ background: url("../../../assets/icon/pauseC-16-normal-Brown.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ &.pauseBtn-icon {
|
|
|
+ background: url("../../../assets/NPC/compare-pause-brown.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .loadBtn {
|
|
|
+ background: url("../../../assets/NPC/loading-brown.png") no-repeat left
|
|
|
+ top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
