baby-app/src/pages/music/component/musicPlayback.vue

<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="music-player">
    <!-- 返回按钮 -->
    <view class="header">
      <image
        @click="goBack"
        style="width: 60rpx; height: 60rpx"
        src="@/static/icon/Left.svg"
      ></image>
    </view>

    <view class="player-content">
      <!-- 播放图片 -->
      <view class="record-player">
        <image src="@/static/icon/fi-rr-big-play.svg" alt="Record Player" class="record-image" />
      </view>
      <!-- 播放按钮 -->
      <view class="track-info">
        <!-- 歌名 取消收藏 -->
        <view class="song-header">
          <view class="song-title">{{ song.name }}</view>
          <view class="favorite-btn">
            <image
              @click="cancelHeart"
              style="width: 32rpx; height: 32rpx"
              :src="
                song.favorite
                  ? '@/static/icon/fi-rr-heart-grey.svg'
                  : '@/static/icon/fi-rr-heart.svg'
              "
            ></image>
          </view>
        </view>
        <!-- 进度条时间 -->
        <view class="progress-container">
          <!-- <view class="progress-bar"> -->
          <!-- <view class="progress-current"></view> -->
          <input
            type="range"
            v-model="currentTime"
            :max="duration"
            step="0.1"
            @input="onSliderChange"
            class="slider"
          />
          <!-- </view> -->
          <view class="time-info">
            <text class="current-time">{{ formatTime(currentTime) }}</text>
            <text class="total-time">{{ formatTime(duration) }}</text>
          </view>
        </view>
        <!-- 上一曲下一曲播放 -->
        <view class="controls">
          <!-- 循环播放 -->
          <view class="control-btn" @click="palyCycleBtn">
            <image
              style="width: 32rpx; height: 32rpx"
              src="@/static/icon/fi-rr-refresh.svg"
            ></image>
          </view>
          <!-- 上一曲 -->
          <view class="control-btn" @click="previousSongBtn">
            <image style="width: 48rpx; height: 32rpx" src="@/static/icon/Group-left.svg"></image>
          </view>
          <!-- 播放 暂停 -->
          <view class="control-paly" @click="togglePlayPause">
            <button class="control-btn pause-btn" v-if="isPlaying">
              <image style="width: 40rpx; height: 40rpx" src="@/static/icon/Vector.svg"></image>
            </button>
            <button class="control-btn pause-btn" v-else>
              <view class="control-Vector">
                <image
                  style="width: 8rpx; height: 40rpx"
                  src="@/static/icon/Vector-paly.svg"
                ></image>
              </view>
              <view class="control-Vector">
                <image
                  style="width: 8rpx; height: 40rpx"
                  src="@/static/icon/Vector-paly.svg"
                ></image>
              </view>
            </button>
          </view>
          <!-- 下一曲 -->
          <view class="control-btn" @click="nextSongBtn">
            <image style="width: 48rpx; height: 32rpx" src="@/static/icon/Group-right.svg"></image>
          </view>
          <!--  -->
          <view class="control-btn">
            <image
              style="width: 32rpx; height: 32rpx"
              src="@/static/icon/fi-rr-shuffle.svg"
            ></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  const song = ref({})
  const audioSrc = ref('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3') // 替换为你的音频文件路径
  const isPlaying = ref(true) // 用来标识播放状态
  const currentTime = ref(0) // 当前播放时间
  const duration = ref(0) // 歌曲总时长
  const audio = uni.createInnerAudioContext()

  // 格式化时间
  const formatTime = (time) => {
    const minutes = Math.floor(time / 60)
    const seconds = Math.floor(time % 60)
    return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
  }

  onLoad((query) => {
    if (query.songDate) {
      song.value = JSON.parse(decodeURIComponent(query.songDate))
    }
  })
  onMounted(() => {
    // audio.autoplay = true
    // audio.src = audioSrc.value
    // 获取音频的总时长
    audio.onCanplay(() => {
      duration.value = audio.duration
      console.log('Total duration:', duration.value) // 用于调试
    })
    // 更新 currentTime
    audio.onTimeUpdate(() => {
      currentTime.value = audio.currentTime
    })
    // 当音频播放完时，自动重置播放
    audio.onEnded(() => {
      isPlaying.value = false
    })
  })

  //   实现返回逻辑
  const goBack = () => {
    uni.navigateBack()
  }
  // 取消收藏
  const cancelHeart = () => {
    console.log('取消收藏')
  }
  // 循环播放
  const palyCycleBtn = () => {
    audio.loop = true
    audio.autoplay = true
    audio.src = audioSrc.value
    isPlaying.value = true
  }
  // 上一曲
  const previousSongBtn = () => {
    console.log('上一曲')
  }
  // 下一曲
  const nextSongBtn = () => {
    console.log('下一曲')
  }
  // 实现播放/暂停切换逻辑
  // const togglePlayPause = () => {
  //   if (isPlaying.value) {
  //     audio.autoplay = true
  //     audio.src = audioSrc.value
  //   } else {
  //     audio.autoplay = false
  //     audio.src = audioSrc.value
  //   }
  //   isPlaying.value = !isPlaying.value
  // }
  // 切换播放/暂停
  const togglePlayPause = () => {
    if (isPlaying.value) {
      console.log(111)
      audio.pause()
    } else {
      audio.play()
      console.log(222)
    }
    isPlaying.value = !isPlaying.value
  }

  // 进度条拖动时，更新音频时间
  const onSliderChange = () => {
    audio.seek(currentTime.value)
  }
</script>

<style scoped lang="scss">
  .music-player {
    height: 100%;
    margin: 0 auto;
    background-color: #ffffff;
  }

  .header {
    padding: 1rem;
  }

  .player-content {
    height: 100%;
    padding: 1rem;
  }
  // 播放图片
  .record-player {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
  }

  .record-image {
    width: 620rpx;
    height: 640rpx;
  }

  // 播放
  .track-info {
    padding: 0 0.5rem;
  }
  // 歌名
  .song-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
  }

  .song-title {
    margin: 0;
    font-size: 40rpx;
    font-weight: 500;
    color: #333;
  }
  // <!-- 进度条时间 -->
  .progress-container {
    margin-bottom: 2rem;
  }

  .progress-bar {
    position: relative;
    width: 100%;
    height: 8rpx;
    margin-bottom: 0.5rem;
    background-color: #eee;
    border-radius: 4rpx;
  }

  .progress-current {
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background-color: #ff8c69;
    border-radius: 4rpx;
  }

  .time-info {
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    color: #666;
  }
  //   <!-- 上一曲下一曲播放 -->
  .controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
  }

  .control-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80rpx;
    height: 80rpx;
    padding: 0.5rem;
  }
  .pause-btn {
    width: 132rpx;
    height: 132rpx;
    background: #f88842;
    border-radius: 50%;
  }
  .control-Vector {
    width: 20rpx;
  }
</style>