微信小程序封面旋转音乐播放器的实现

最新推荐文章于 2024-09-30 10:52:34 发布

hello_java_

最新推荐文章于 2024-09-30 10:52:34 发布

阅读量8.2k

点赞数 11

分类专栏：微信小程序文章标签：小程序音乐播放器网易云音乐旋转黑胶唱片

本文链接：https://blog.csdn.net/hello_java_/article/details/82975314

版权

本文介绍了如何使用微信小程序实现类似网易云音乐的播放器功能，包括音频控制、封面旋转效果以及播放进度条。通过InnerAudioContext控制音频，利用CSS keyframes实现封面旋转，并通过style属性控制动画状态。同时，实现了双向绑定以同步播放进度和进度条。作者还提到了可能存在的iOS真机问题以及个人编程规范的思考。

摘要由CSDN通过智能技术生成

最近在学习微信小程序的UI组件，audio音频方面想做一个类似网易云的播放效果。基础需求：

1、能控制音频开始、暂停、停止

2、音乐播放，封面旋转，音乐暂停封面停止旋转

3、能显示歌曲的播放时间和进度条

4、能通过进度条控制音乐的播放进度

先上一张效果图

直接放代码，代码里面写了比较多的注释。

wxml：

 <view class='item'>
    <text>音乐播放器</text>
    <image class='audio_post{
  {music_on?" music_on":""}}'  style="animation-play-state:{
  {music_playing?'running':'paused'}}" src='http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000' ></image>

    <view class=&#