当前位置:   article > 正文

uni-app中实现音乐播放器_uniapp音乐播放器

uniapp音乐播放器

uni-app中实现音乐播放器

1、主要利用的是uni-app中提供的uni.createInnerAudioContext()来进行实现;

2、代码示例

(1)主页面代码展示

<template>
  <view class="music-layout">
    <view class="tn-flex">
      <view class="left-content">
        <view class="left-pic-layout">
          <img :src="bgUrl" :class="isPlay ? 'img-rotate' : ''">
          <view class="small-circle"></view>
        </view>
        <view class="like-layout">
          <text class="tn-icon-like-fill" v-if="musicDetail.liked" @click="onLikeMusic(false, musicDetail)"></text>
          <text class="tn-icon-like" v-else @click="onLikeMusic(true, musicDetail)"></text>
        </view>
      </view>
      <view class="right-content">
        <view class="song-name-layout">
          <view>{{ musicDetail.bsmb002 }}</view>
          <view v-if="isPlay"><PlayerAnimation></PlayerAnimation></view>
        </view>
        <view class="progress-layout">
          <text>{{ formatTime(musicCurrentTime) }}</text>
          <tn-slider
              :min="0"
              :max="musicTotalTime"
              class="progress"
              v-model="musicCurrentTime"
              inactiveColor="#EAEAEA"
              activeColor="#FF3370"
              :blockWidth="1"
              :lineHeight="4">
          </tn-slider>
          <text>{{formatTime(musicTotalTime)}}</text>
        </view>
        <view class="actions-layout">
          <view class="toggle-type-layout" @click="handleToggleType">
            <img src="http://192.168.101.152:8848/commonStatic/ckzs/fetusMovement/loop-black-icon.png" v-if="toggleType == 1" >
            <img src="http://192.168.101.152:8848/commonStatic/ckzs/fetusMovement/single-black-icon.png" v-else-if="toggleType == 2">
            <img src="http://192.168.101.152:8848/commonStatic/ckzs/fetusMovement/random-black-icon.png" v-else>
          </view>
          <view class="action-center">
            <img src="http://192.168.101.152:8848/commonStatic/ckzs/fetusMovement/previous-icon.png" class="previous-icon" @click="handlePreviousPlay">
            <img src="http://192.168.101.152:8848/commonStatic/ckzs/fetusMovement/play-icon.png" v-if="isPlay" class="player-icon" @click="handlePlay(false)">
            <img src="http://192.168.101.152:8848/commonStatic/ckzs/fetusMovement/stop-icon.png" v-else class="player-icon" @click="handlePlay(true)">
            <img src="http://192.168.101.152:8848/commonStatic/ckzs/fetusMovement/next-icon.png" class="next-icon" @click="handleNextPlay">
          </view>
          <img src="http://192.168.101.152:8848/commonStatic/ckzs/fetusMovement/music-list.png" class="music-list-icon" @click="handleMusicListShow">
        </view>
      </view>
    </view>
    <view class="add-music" @click="handleAddWisk">
      点这里添加您的音乐心愿单~
    </view>
  </view>
</template>

<script>

import { formatTime } from '@/utils/util'; // 代码在下方对应文件中
import PlayerAnimation from "../../../components/player-animation/player-animation.vue"; // 播放效果动画(代码在下方对应文件中)
import { musicList, saveCollect, cancleCollect } from "@/api/fetusMovement"; // 接口
import { mediaUrl } from '@/utils/env'; // 静态资源地址前缀

export default {
  components: {
    PlayerAnimation
  },
  data() {
    return {
      isPlay: false, // 是否播放
      toggleType: 1, // 播放顺序 (1:循环;2:单曲循环;3:随机)
      musicDetail : { }, // 音乐详情
      current: null, // 当前播放的是哪首
      currentSrc: '', // 当前音乐路径
      musicPlayCtx: null, // 音频上下文
      musicCurrentTime: 0, // 音乐当前播放进度
      musicTotalTime: 100, // 音乐总的时间
      musicList: [], // 音乐列表
      bgUrl: 'http://192.168.101.152:8848/commonStatic/ckzs/fetusMovement/tjyy_bg.png',
      timers: null,
      openId: ''
    }
  },
  watch: {
    currentSrc: {
      handler() {
        if(this.musicPlayCtx) {
          this.musicPlayCtx.destroy();
        }
        this.musicPlayCtx = uni.createInnerAudioContext();
        this.musicPlayCtx.obeyMuteSwitch = false;
        this.musicCurrentTime = 0;
        this.musicPlayCtx.src = encodeURI(mediaUrl+ this.musicDetail.bsmb007);
        this.musicTotalTime = this.musicDetail.bsmb009;
        if(this.isPlay){
          this.handleAudioPlay();
        }
      },
      immediate: true,
      deep: true,
    }
  },
  mounted() {
    this.openId = getApp().globalData.openId;
    this.getMusicList();
  },
  methods: {
    // 打开音乐列表
    getMusicList() {
      musicList(this.openId).then(res => {
        if (res.success) {
          this.musicList = res.result;
          this.current = 0;
          this.musicDetail = this.musicList[this.current];
          this.currentSrc = encodeURI(mediaUrl+ this.musicDetail.bsmb007);
        }
      })
    },
    // 播放列表弹窗显示
    handleMusicListShow() {
      const { isPlay, toggleType, musicList, current} = this;
      this.$emit('handleMusicListShow', {
        bool: true,
        isPlay,
        toggleType,
        musicList,
        current
      });
    },
    formatTime,
    // 处理播放
    handlePlay(bool) {
      this.isPlay = bool;
      if(bool) {
        this.musicPlayCtx.seek(this.musicCurrentTime + 1);
        this.handleAudioPlay();
      } else {
        this.musicPlayCtx.stop();
      }
    },
    // 播放
    handleAudioPlay() {
      this.musicPlayCtx.play();
      if(this.timers) {
        clearTimeout(this.timers);
      }
      this.timers = setTimeout(() => {
        console.log(this.musicPlayCtx.paused);
      }, 200);
      // 播放完成
      this.musicPlayCtx.onEnded(() => {
        if(this.toggleType == 1) {
          this.handleNextPlay(); // 列表循环
        } else if(this.toggleType == 2) {
          this.musicPlayCtx.play(); // 单曲循环
        } else {
          this.current = Math.floor(Math.random() * this.musicList.length);
          this.musicDetail = this.musicList[this.current];
          this.currentSrc = encodeURI(mediaUrl+ this.musicDetail.bsmb007);
        }
      })
      // 更新播放时间
      this.musicPlayCtx.onTimeUpdate(() => {
        this.onTimeUpdate();
      })
      // 播放出现错误
      this.musicPlayCtx.onError(() => {
        this.onError();
      })
    },
    // 下一首
    handleNextPlay() {
      this.isPlay = true;
      if(this.current < this.musicList.length - 1) {
        uni.showToast({
          title: '即将播放下一首',
          icon: 'none'
        })
        this.current ++;
        this.musicDetail = this.musicList[this.current];
        this.currentSrc = encodeURI(mediaUrl+ this.musicDetail.bsmb007);
        return
      }
      uni.showToast({
        title: '已经为最后一首了',
        icon: 'none'
      })
    },
    // 上一首
    handlePreviousPlay() {
      this.isPlay = true;
      if(this.current) {
        this.current --;
        uni.showToast({
          title: '即将播放上一首',
          icon: 'none'
        })
        this.musicDetail = this.musicList[this.current];
        this.currentSrc = encodeURI(mediaUrl+ this.musicDetail.bsmb007);
        return;
      }
      uni.showToast({
        title: '已经为第一首了',
        icon: 'none'
      })
    },
    // 播放类型
    handleToggleType(parmas) {
      if(parmas) {
        this.toggleType = parmas;
        const { isPlay, toggleType, musicList, current} = this;
        this.$emit('handleMusicListShow', {
          bool: true,
          isPlay,
          toggleType,
          musicList,
          current
        });
        return;
      }
      this.toggleType = this.toggleType == 1 ? 2 : this.toggleType == 2 ? 3 : 1;
    },
    // 切换音乐
    handleMusicChange(index) {
      this.isPlay = true;
      this.musicDetail = this.musicList[index];
      this.current = index;
      this.currentSrc = encodeURI(mediaUrl+ this.musicDetail.bsmb007);
      this.handleMusicListShow();
    },
    // 加载失败
    onError() {
      uni.showToast({
        title: '音频加载失败',
        icon: 'none'
      })
    },
    // 时间更新
    onTimeUpdate() {
      if (this.musicPlayCtx.currentTime > 0 && this.musicPlayCtx.currentTime <= 1) {
        this.musicCurrentTime = 1;
      } else if (this.musicCurrentTime !== Math.floor(this.musicPlayCtx.currentTime)) {
        this.musicCurrentTime = Math.floor(this.musicPlayCtx.currentTime);
      }
    },
    // 喜欢
    onLikeMusic(bool, item) {
      this.musicDetail.liked = bool;
      if (bool) {
        //收藏
        saveCollect({
          bsmId: item.id,
          openId: this.openId
        }).then(res => {
          if (res.success) {
            uni.showToast({
              title: '收藏成功',
              icon: 'none'
            })
            this.getMusicList()
          }
        })
      } else {
        //取消收藏
        cancleCollect({
          bsmId: item.id,
          openId: this.openId,
          id: item.collectId
        }).then(res => {
          if (res.success) {
            uni.showToast({
              title: '已取消收藏',
              icon: 'none'
            })
            this.getMusicList()
          }
        })
      }
    },
    // 心愿歌单
    handleAddWisk() {
      uni.navigateTo({
        url: '/toolsPages/fetusMovement/addWish'
      })
    }
  },
  // 销毁
  destroyed() {
    if(this.musicPlayCtx) this.musicPlayCtx.destroy();
    if(this.timers) clearTimeout(this.timers);
  }
}
</script>

<style scoped lang="scss">

.music-layout {
  position: relative;
  width: 690rpx;
  padding: 20rpx 30rpx;
  background: #FFFFFF;
  border-radius: 30rpx;
  backdrop-filter: blur(16px);
}

.left-content {
  width: 130rpx;
  .like-layout {
    margin-top: 20rpx;
    > text {
      color: #FF3370;
      font-size: 40rpx;
    }
  }
}

.left-pic-layout {
  position: relative;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .small-circle{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20rpx;
    height: 20rpx;
    background-color: white;
    border-radius: 50%;
  }
}

.right-content {
  flex: 1;
  margin-left: 30rpx;
}

.song-name-layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 32rpx;
  color: #323A59;
  line-height: 40rpx;
  height: 40rpx;
  text {
    color: rgba(115, 121, 141, 1);
  }
}

.progress-layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 25rpx 0 0 2rpx;
  font-size: 26rpx;
  color: #73798D;
  line-height: 36rpx;
  .progress {
    display: flex;
    align-items: center;
    flex: 1;
    margin: 0 20rpx;
  }
}

.actions-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 25rpx 0 0 4rpx;
  .toggle-type-layout {
    > img {
      width: 30rpx;
      height: 26rpx;
    }
  }

  .action-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    margin: 0 86rpx;
  }

  .previous-icon, .next-icon {
    width: 30rpx;
    height: 32rpx;
  }

  .player-icon {
    width: 42rpx;
    height: 42rpx;
  }

  .music-list-icon {
    width: 30rpx;
    height: 30rpx;
  }
}

.img-rotate {
  transform-origin: center center;
  animation: rotate 5s infinite linear; /* 实现旋转动画效果 */
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.add-music {
  margin-top: 20rpx;
  text-align: center;
  font-size: 20rpx;
  color: #999999;
  text-decoration: underline #999999;
}
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
  • 328
  • 329
  • 330
  • 331
  • 332
  • 333
  • 334
  • 335
  • 336
  • 337
  • 338
  • 339
  • 340
  • 341
  • 342
  • 343
  • 344
  • 345
  • 346
  • 347
  • 348
  • 349
  • 350
  • 351
  • 352
  • 353
  • 354
  • 355
  • 356
  • 357
  • 358
  • 359
  • 360
  • 361
  • 362
  • 363
  • 364
  • 365
  • 366
  • 367
  • 368
  • 369
  • 370
  • 371
  • 372
  • 373
  • 374
  • 375
  • 376
  • 377
  • 378
  • 379
  • 380
  • 381
  • 382
  • 383
  • 384
  • 385
  • 386
  • 387
  • 388
  • 389
  • 390
  • 391
  • 392
  • 393
  • 394
  • 395
  • 396
  • 397
  • 398
  • 399
  • 400
  • 401
  • 402
  • 403
  • 404
  • 405
  • 406
  • 407
  • 408
  • 409
  • 410
  • 411
  • 412
  • 413
  • 414
  • 415
  • 416
  • 417
  • 418
  • 419
  • 420
  • 421
  • 422
  • 423
  • 424
  • 425
  • 426
  • 427
  • 428
  • 429

(2)utils中util.js文件代码

function fixedZero(val) {
    return val * 1 < 10 ? `0${val}` : val;
}

const formatTime = (time) =>  {
    const minutes = 60;
    const m = Math.floor(time / minutes);
    const s = Math.floor(time % 60);
    return `${fixedZero(m)}:${fixedZero(s)}`;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

(3)components中player-animation文件夹player-animation.vue文件代码

<template>
    <view class="loading">
      <view class="item"></view>
      <view class="item"></view>
      <view class="item"></view>
      <view class="item"></view>
      <view class="item"></view>
    </view>
</template>

<script>
export default {
  name: "player-animation"
}
</script>

<style scoped>
/* 设置位置 */
.loading {
  height: 24rpx;
  display: flex;
  align-items: center;
}

.item {
  height: 24rpx;
  width: 2rpx;
  background: #FF3370;
  margin: 0 3rpx;
  border-radius: 10rpx;
  animation: loading 2s infinite;
}

/* 设置动画 */
@keyframes loading {
  0% {
    height: 0;
  }

  50% {
    height: 24rpx;
  }

  100% {
    height: 0;
  }
}

/* 为每一个竖条设置延时 */
.item:nth-child(2) {
  animation-delay: 0.2s;
}

.item:nth-child(3) {
  animation-delay: 0.4s;
}

.item:nth-child(4) {
  animation-delay: 0.6s;
}

.item:nth-child(5) {
  animation-delay: 0.8s;
}

</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66

(4)播放器列表弹窗代码

<template>
  <tn-popup v-model="show"
            safeAreaInsetBottom
            mode="bottom"
            height="1200rpx"
            @close="handleClose">
    <view class="music-container">
      <view class="header-layout">
        <view class="header-left">
          胎教音乐列表<text>({{ musicLst.length }}首)</text>
        </view>
        <view class="header-right" @click="() => handleToggle()">
          <img src="http://192.168.101.152:8848/commonStatic/ckzs/fetusMovement/loop-icon.png" v-if="toggleType == 1" >
          <img src="http://192.168.101.152:8848/commonStatic/ckzs/fetusMovement/single-icon.png" v-else-if="toggleType == 2">
          <img src="http://192.168.101.152:8848/commonStatic/ckzs/fetusMovement/random-icon.png" v-else>
          顺序播放
        </view>
      </view>
      <scroll-view scroll-y style="height: 1050rpx;">
        <view class="music-list">
          <view :class="['music-item', current  == index && isPlay ? 'active' : '']"
                v-for="(item, index) in musicLst"
                :key="index"
                @click="handleItemClick(index)">
            <view class="name">{{item.bsmb002}}</view>
            <PlayerAnimation v-if="current == index && isPlay"></PlayerAnimation>
          </view>
        </view>
      </scroll-view>
    </view>
  </tn-popup>

</template>

<script>
import PlayerAnimation from "../../../components/player-animation/player-animation.vue";
export default {
  props: {
    musicLst : {
      type: Array,
      default: []
    },
    current: {
      type: Number,
      default: 0
    },
    toggleType:{
      type:Number,
      default: 1
    },
    isPlay:{
      type:Boolean,
      default: false
    }
  },
  components: {
    PlayerAnimation
  },
  data() {
    return {
      show: false
    }
  },
  methods: {
    // 切换歌曲
    handleItemClick(index) {
      this.$emit('handleMusicChange', index);
    },
    // 关闭
    handleClose() {
      this.show = false;
    },
    // 播放类型切换
    handleToggle() {
      const playType = this.toggleType == 1 ? 2 : this.toggleType == 2 ? 3 : 1;
      this.$emit('handleToggleType', playType);
    },
  }
}
</script>

<style scoped lang="scss">
.music-container {
  padding: 0 30rpx 0;
  .header-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10rpx;
    height: 90rpx;
  }
  .header-left {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
    text {
      font-size: 24rpx;
      font-weight: 400;
      color: #666666;
      line-height: 34rpx;
    }
  }
  .header-right {
    display: flex;
    align-items: center;
    height: 56rpx;
    background: linear-gradient(135deg, #FF74A2 0%, #FF3370 100%);
    border-radius: 28rpx;
    padding: 0 12rpx;
    font-size: 26rpx;
    color: white;
    img {
      margin-right: 10rpx;
      width: 26rpx;
      height: 26rpx;
    }
  }
}

.music-list {
  font-size: 28rpx;
  color: #333333;
  line-height: 40rpx;

  .music-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
  }
}

.active {
  color: #FF3370;
}

</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143

3、实现也面向效果展示

(1)播放器
在这里插入图片描述
(2)播放器弹窗
在这里插入图片描述
4、实现该功能过程所遇到的问题总结

(1)当一首歌曲播完之后,进度条不更新问题,在网上查看到的方法都是说:该问题是存在的一个bug,解决的方案是我们再代码中要主动的调用paused()方法

this.timers = setTimeout(() => {
    console.log(this.musicPlayCtx.paused);
}, 200);
  • 1
  • 2
  • 3

(2)当点击暂停播放后,音乐从头播放的问题,解决方案:利用seek()方法使其跳转到指定位置

 this.musicPlayCtx.seek(this.musicCurrentTime + 1);
  • 1

(3)音乐播放器的地址,含有中文名称,在模拟器上面可以正常播放,手机上面不可以,解决方案:需要将该地址进行编码,编译成编译器可以识别地址

this.currentSrc = encodeURI(mediaUrl+ this.musicDetail.bsmb007);
  • 1

5、以上代码可以直接粘贴复制到项目即可使用

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/在线问答5/article/detail/779131
推荐阅读
相关标签
  

闽ICP备14008679号