EEP_BookPreview/src/views/book/courseware/preview/components/common/AudioPlay.vue

<template>
  <div class="audio-wrapper">
    <div v-if="'big' === viewSize" class="audio-big">
      <div v-if="'list' === viewMethod">
        <div v-if="fileNameDisplay == 'true'" class="audio-name">{{ curAudioIndex + 1 }}. {{ fileName }}</div>
        <div v-if="showSlider" class="slider-area">
          <span class="audio-time">{{ secondFormatConversion(audio.current_time) }}</span>
          <el-slider
            v-model="play_value"
            class="audio-slider"
            :format-tooltip="formatProcessToolTip"
            :style="{ '--slider-color': topicColor }"
            @change="changeCurrentTime"
          />
          <span class="audio-time">{{ audio_allTime }}</span>
          <el-select v-model="audio.playbackRate" style="width: 100px" @change="onSpeedChange">
            <el-option
              v-for="speed in playbackRateList.split(' ')"
              :key="speed"
              :value="speed"
              :selected="speed === 1.0"
              :label="`${speed}x`"
            >
              {{ speed }}x
            </el-option>
          </el-select>
        </div>
        <div class="audio-icon">
          <SvgIcon icon-class="pre" size="12" :color="topicColor" @click="changeFile('prev')" />
          <SvgIcon :icon-class="iconClass" :color="topicColor" size="26" @click="playAudio" />
          <SvgIcon icon-class="next" size="12" :color="topicColor" @click="changeFile('next')" />
        </div>
      </div>
      <div v-else class="independent-big">
        <div v-if="fileNameDisplay == 'true'" class="audio-name">{{ audioIndex + 1 }}. {{ fileName }}</div>
        <div class="slider-area">
          <SvgIcon :icon-class="iconClass" size="18" :color="topicColor" style="cursor: pointer" @click="playAudio" />
          <span class="audio-time">{{ secondFormatConversion(audio.current_time) }}</span>
          <el-slider
            v-model="play_value"
            class="audio-slider"
            :format-tooltip="formatProcessToolTip"
            :style="{ '--slider-color': topicColor }"
            @change="changeCurrentTime"
          />
          <span class="audio-time">{{ audio_allTime }}</span>
          <el-select v-model="audio.playbackRate" style="width: 100px" @change="onSpeedChange">
            <el-option
              v-for="speed in playbackRateList.split(' ')"
              :key="speed"
              :value="speed"
              :selected="speed === 1.0"
              :label="`${speed}x`"
            >
              {{ speed }}x
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <!-- <div v-else-if="'middle' === viewSize" class="audio-middle">
      <div v-if="fileNameDisplay == 'true'" class="audio-name">{{ audioIndex + 1 }}. {{ fileName }}</div>
      <div class="slider-area">
        <SvgIcon :icon-class="iconClass" size="18" :color="topicColor" @click="playAudio" />
        <span class="audio-time">{{ secondFormatConversion(audio.current_time) }}</span>
        <el-slider
          v-model="play_value"
          class="audio-slider"
          :format-tooltip="formatProcessToolTip"
          :style="{ '--slider-color': topicColor }"
          @change="changeCurrentTime"
        />
        <span class="audio-time">{{ audio_allTime }}</span>
      </div>
    </div> -->
    <div v-else-if="'middle' === viewSize" class="audio-middle">
      <div v-if="fileNameDisplay == 'true'" class="audio-name">{{ audioIndex + 1 }}. {{ fileName }}</div>
      <span class="icon-box" :style="{ borderColor: topicColor }">
        <SvgIcon
          :icon-class="iconClass"
          size="12"
          :color="topicColor"
          :style="{ marginLeft: audio.paused ? '4px' : '0' }"
          @click="playAudio"
        />
      </span>
    </div>
    <div v-else-if="'small' === viewSize" class="audio-small">
      <div v-if="fileNameDisplay == 'true'" class="audio-name">{{ audioIndex + 1 }}. {{ fileName }}</div>
      <SvgIcon
        icon-class="sound"
        size="20"
        :color="topicColor"
        :class="{ 'sound-icon--playing': !audio.paused }"
        @click="playAudio"
      />
    </div>
    <div v-else :class="['audio-list', { active: audioIndex === curAudioIndex }]" :style="cssVars">
      <div class="active-mark">
        <SvgIcon
          v-if="audioIndex === curAudioIndex"
          icon-class="paused"
          size="12"
          :color="topicColor"
          style="cursor: default"
        />
      </div>
      <span class="audio-name">{{ audioIndex + 1 }}. {{ fileName }}</span>
      <span class="audio-time">{{ audio_allTime }}</span>
    </div>

    <audio
      :id="fileId"
      :ref="fileId"
      :src="fileUrl"
      preload="metadata"
      @loadedmetadata="onLoadedmetadata"
      @timeupdate="onTimeupdate"
      @canplaythrough="oncanplaythrough"
    ></audio>
  </div>
</template>

<script>
import { GetFileURLMap } from '@/api/app';
import { secondFormatConversion } from '@/utils/transform';
export default {
  name: 'AudioPlay',
  props: {
    fileId: {
      type: String,
      required: true,
    },
    fileUrl: {
      type: String,
      default: '',
    },
    fileName: {
      type: String,
      default: '',
    },
    viewSize: {
      type: String,
      default: 'big',
    },
    viewMethod: {
      type: String,
      default: 'independent',
    },
    audioIndex: {
      type: Number,
      default: 0,
    },
    curAudioIndex: {
      type: Number,
      default: 0,
    },
    showSlider: {
      type: Boolean,
      default: false,
    },
    // 是否显示音频进度条
    showProgress: {
      type: Boolean,
      default: true,
    },
    fileNameDisplay: {
      type: String,
      default: 'true',
    },
    topicColor: {
      type: String,
      default: '#076aff',
    },
    assistColor: {
      type: String,
      default: '#076aff',
    },
  },
  data() {
    return {
      secondFormatConversion,
      url: '',
      audio: {
        paused: true,
        playing: false,
        // 音频当前播放时长
        current_time: 0,
        // 音频最大播放时长
        max_time: 0,
        isPlaying: false,
        loading: false,
        playbackRate: '1.0',
      },
      playbackRateList: '0.25 0.5 0.75 1.0 1.25 1.5 1.75 2.0 3.0',
      play_value: 0,
      audio_allTime: null, // 展示总时间
    };
  },
  computed: {
    iconClass() {
      return this.audio.paused ? 'paused' : 'playing';
    },
    cssVars() {
      return {
        '--assist-color': this.assistColor,
      };
    },
  },
  watch: {
    fileId: {
      handler(val) {
        if (this.fileUrl) {
          this.url = this.fileUrl;
          return;
        }
        if (!val) return;
        GetFileURLMap({ file_id_list: [val] }).then(({ url_map }) => {
          this.url = url_map[val];
        });
      },
      immediate: true,
    },
  },
  mounted() {
    if (this.fileId) {
      this.$refs[this.fileId].addEventListener('ended', () => {
        this.audio.paused = true;
      });
      this.$refs[this.fileId].addEventListener('pause', () => {
        this.audio.paused = true;
      });
      this.$refs[this.fileId].addEventListener('play', () => {
        this.audio.paused = false;
      });
    }
  },
  methods: {
    getCurTime(curTime) {
      this.curTime = curTime * 1000;
    },
    playAudio() {
      if (!this.url || !this.fileUrl) return;
      const audio = this.$refs[this.fileId] || {};
      this.pauseAll();
      audio.playbackRate = this.audio.playbackRate;
      audio.paused ? audio.play() : audio.pause();
    },
    onSpeedChange(speed) {
      const audio = this.$refs[this.fileId] || {};
      audio.playbackRate = this.audio.playbackRate;
    },
    // 进度条格式化toolTip
    formatProcessToolTip(index) {
      let _index = parseInt((this.audio.max_time / 100) * index);
      return secondFormatConversion(_index);
    },
    // 点击 拖拽播放音频
    changeCurrentTime(value) {
      this.pauseAll();
      this.$refs[this.fileId].play();
      this.audio.playing = true;
      this.$refs[this.fileId].currentTime = parseInt((value / 100) * this.audio.max_time);
    },
    // 音频加载完之后
    onLoadedmetadata(res) {
      this.audio.max_time = parseInt(res.target.duration);
      this.audio_allTime = secondFormatConversion(this.audio.max_time);
    },
    // 当音频当前时间改变后，进度条也要改变
    onTimeupdate(res) {
      this.audio.current_time = res.target.currentTime;
      this.play_value = (this.audio.current_time / this.audio.max_time) * 100;
      if (this.audio.current_time * 1000 > this.ed) {
        this.$refs[this.fileId].pause();
      }
    },
    onTimeupdateTime(res, playFlag) {
      if (!res && res !== 0) return;
      let audioId = this.audioId;
      this.$refs[audioId].currentTime = res;
      this.play_value = (res / this.audio.max_time) * 100;
      if (playFlag) {
        let audio = document.getElementsByTagName('audio');
        audio.forEach((item) => {
          if (item.id !== audioId) {
            item.pause();
          }
        });
        this.$refs[audioId].play();
      }
    },
    oncanplaythrough() {
      this.audio.loading = false;
    },
    pauseAll() {
      let audioArr = document.getElementsByTagName('audio');
      if (audioArr && audioArr.length > 0) {
        for (let i = 0; i < audioArr.length; i++) {
          if (audioArr[i].id !== this.fileId) {
            audioArr[i].pause();
          }
        }
      }
    },
    changeFile(type) {
      this.pauseAll();
      this.$emit('changeFile', type);
    },
    changeAudio(id) {
      this.pauseAll();
    },
  },
};
</script>

<style lang="scss" scoped>
.audio-wrapper {
  .audio-time {
    white-space: nowrap;
  }

  .audio-big {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    text-align: center;

    .audio-name {
      padding: 8px;
      margin-bottom: 8px;
      font-size: 14px;
      background-color: #eee;
      border-radius: 4px;
    }

    .audio-icon {
      display: flex;
      column-gap: 32px;
      align-items: center;
      justify-content: center;

      .svg-icon {
        cursor: pointer;
      }
    }
  }

  .independent-big {
    .audio-name {
      text-align: left;
    }
  }

  .audio-middle1 {
    width: 280px;
    padding: 12px 16px;
    border-radius: 4px;

    .audio-name {
      padding: 8px;
      margin-bottom: 8px;
      font-size: 14px;
      text-align: left;
      background-color: #eee;
      border-radius: 4px;
    }
  }

  .audio-middle {
    display: flex;
    flex-direction: column;
    column-gap: 10px;
    align-items: left;
    margin-left: 5px;

    .audio-name {
      padding: 8px;
      margin-bottom: 8px;
      font-size: 14px;
      text-align: center;
      background-color: #eee;
      border-radius: 4px;
    }

    .icon-box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      cursor: pointer;
      border: 4px solid #076aff;
      border-radius: 20px;

      // .svg-icon {
      //   color: #fff;
      // }
    }
  }

  .audio-small {
    display: flex;
    flex-direction: column;
    column-gap: 10px;
    align-items: left;
    margin-left: 10px;
    cursor: pointer;

    .audio-name {
      padding: 8px;
      margin-bottom: 8px;
      font-size: 14px;
      text-align: center;
      background-color: #eee;
      border-radius: 4px;
    }
  }

  .audio-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 24px 8px 16px;

    &.active {
      //background-color: #ebb572;
      background-color: var(--assist-color, #f4f9ff);
    }

    .active-mark {
      width: 20px;
      height: 28px;
    }

    .audio-name {
      flex: 1;
    }
  }

  .slider-area {
    display: flex;
    column-gap: 16px;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;

    .audio-slider {
      width: 90%;

      :deep .el-slider__runway {
        height: 4px;
      }

      :deep .el-slider__button {
        width: 4px;
        height: 4px;
        margin-top: -1px;
        border: none;
      }

      :deep .el-slider__bar {
        height: 4px;
        background-color: var(--slider-color, #076aff);
      }
    }
  }

  :deep .el-input .el-input__inner {
    background-color: rgba(255, 255, 255, 0%);
    border: none;

    span {
      display: none !important;
    }
  }
}

.sound-icon--playing {
  animation: soundWave 1s infinite;
}

@keyframes soundWave {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}
</style>