微信小程序带可拖动进度条和时间显示的音频播放器

最新推荐文章于 2024-06-02 13:43:36 发布

C沉冰

最新推荐文章于 2024-06-02 13:43:36 发布

阅读量2.2w

点赞数 19

分类专栏：微信小程序文章标签：微信小程序音频播放器

本文链接：https://blog.csdn.net/qq_42228034/article/details/82772814

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

已更新更为强大版本的具有背景播放功能的播放器，以下为传送门：

https://blog.csdn.net/qq_42228034/article/details/100578572

此版本仅具有参考意义

周知，微信官方自带的音频播放器是没有进度条的，为了实现有进度条，并且拖动，只能自己写一个了；

下面是演示图

①页面加载完成后，能够直接显示音频的时长

②播放时，进度条变化，播放时间变化，拖动进度条可以跳转到改进度播放

话不多说，直接上代码

首先是微信官方所提倡的代码片段的方式：

wechatide://minicode/0tLe2xmA7x2O

如果不能用那么请使用以下代码：

wxml：

<view class='audioPlayer'>
  <view class='player'>
    <image src='{{audiolist[0].coverimg}}' class='audioBack'></image>
    <view class='audioControls'>
      <view class='flex'>
        <view class='bottom' catchtap='playAudio'>
          <!-- 按钮 -->
          <view wx:if="{{isPlayAudio}}">
            <image src='../../assets/pause.png' />
          </view>
          <view wx:else>
            <image src='../../assets/play.png' />
          </view>
        </view>
        <view class='slider'>
          <slider bindchange='sliderChange' activeColor='red' block-size="12" value='{{audioTime}}' />
        </view>
        <view class='time'>
          {{showTime1}}/{{showTime2}}
        </view>
      </view>
    </view>
  </view>
</view>

wxss：

.flex{
  display: flex;
}
.audioPlayer{
  width: 100%;
  height: 400rpx;
  margin-bottom: 30rpx;
  box-sizing: border-box;
  padding: 20rpx 30rpx;
}
.player{
  width: 100%;
  height: 100%;
  position: relative;
}
.audioBack{
  width: 100%;
  height: 100%;
}
.audioControls{
  width: 100%;
  height: 80rpx;
  background: black;
  opacity: .8;
  position: absolute;
  bottom: 0;
  color: white;
  font-size: 6pt;
  line-height: 80rpx;
  text-align: center;
}
.audioControls .bottom{
  width: 60rpx;
  height: 100%;
}
.audioControls .bottom image{
  margin-top: 30%;
  margin-left: 30%;
  width: 40rpx;
  height: 40rpx;
}
.audioControls .slider{
  width: 520rpx;
  height: 100%;
}
.slider slider{
  width: 95%;
  margin-left: 4%;
  margin-right: 0;
}
.audioControls .time{
  width: 120rpx;
  height: 100%;
}

js：

const app = getApp()
const innerAudioContext = wx.createInnerAudioContext();
Page({
  data: {
    audiolist:[
      {
        audiosrc:'http://other.web.rh01.sycdn.kuwo.cn/resource/n2/16/17/450264753.mp3',
        coverimg:"https://goss.veer.com/creative/vcg/veer/800water/veer-146156021.jpg"
      }
    ],
    isPlayAudio: false,
    audioSeek: 0,
    audioDuration: 0,
    showTime1: '00:00',
    showTime2: '00:00',
    audioTime: 0
  },
  onLoad: function () {
    
  },
  onShow:function(){
    this.Initialization();
    this.loadaudio();
  },
  //初始化播放器，获取duration
  Initialization(){
    var t=this;
    if (this.data.audiolist[0].audiosrc.length != 0) {
      //设置src
      innerAudioContext.src = this.data.audiolist[0].audiosrc;
      //运行一次
      innerAudioContext.play();
      innerAudioContext.pause();
      innerAudioContext.onCanplay(() => {
        //初始化duration
        innerAudioContext.duration
        setTimeout(function () {
          //延时获取音频真正的duration
          var duration = innerAudioContext.duration;
          var min = parseInt(duration / 60);
          var sec = parseInt(duration % 60);
          if (min.toString().length == 1) {
            min = `0${min}`;
          }
          if (sec.toString().length == 1) {
            sec = `0${sec}`;
          }
          t.setData({ audioDuration: innerAudioContext.duration, showTime2: `${min}:${sec}` });
        }, 1000)
      })
    }
  },
  //拖动进度条事件
  sliderChange(e) {
    var that = this;
    innerAudioContext.src = this.data.audiolist[0].audiosrc;
    //获取进度条百分比
    var value = e.detail.value;
    this.setData({ audioTime: value });
    var duration = this.data.audioDuration;
    //根据进度条百分比及歌曲总时间，计算拖动位置的时间
    value = parseInt(value * duration / 100);
    //更改状态
    this.setData({ audioSeek: value, isPlayAudio: true });
    //调用seek方法跳转歌曲时间
    innerAudioContext.seek(value);
    //播放歌曲
    innerAudioContext.play();
  },
  //播放、暂停按钮
  playAudio() {
    //获取播放状态和当前播放时间
    var isPlayAudio = this.data.isPlayAudio;
    var seek = this.data.audioSeek;
    innerAudioContext.pause();
    //更改播放状态
    this.setData({ isPlayAudio: !isPlayAudio })
    if (isPlayAudio) {
      //如果在播放则记录播放的时间seek，暂停
      this.setData({ audioSeek: innerAudioContext.currentTime });
    } else {
      //如果在暂停，获取播放时间并继续播放
      innerAudioContext.src = this.data.audiolist[0].audiosrc;
      if (innerAudioContext.duration != 0) {
        this.setData({ audioDuration: innerAudioContext.duration });
      }
      //跳转到指定时间播放
      innerAudioContext.seek(seek);
      innerAudioContext.play();
    }
  },
  loadaudio() {
    var that = this;
    //设置一个计步器
    this.data.durationIntval = setInterval(function () {
      //当歌曲在播放时执行
      if (that.data.isPlayAudio == true) {
        //获取歌曲的播放时间，进度百分比
        var seek = that.data.audioSeek;
        var duration = innerAudioContext.duration;
        var time = that.data.audioTime;
        time = parseInt(100 * seek / duration);
        //当歌曲在播放时，每隔一秒歌曲播放时间+1，并计算分钟数与秒数
        var min = parseInt((seek + 1) / 60);
        var sec = parseInt((seek + 1) % 60);
        //填充字符串，使3:1这种呈现出 03：01 的样式
        if (min.toString().length == 1) {
          min = `0${min}`;
        }
        if (sec.toString().length == 1) {
          sec = `0${sec}`;
        }
        var min1 = parseInt(duration / 60);
        var sec1 = parseInt(duration % 60);
        if (min1.toString().length == 1) {
          min1 = `0${min1}`;
        }
        if (sec1.toString().length == 1) {
          sec1 = `0${sec1}`;
        }
        //当进度条完成，停止播放，并重设播放时间和进度条
        if (time >= 100) {
          innerAudioContext.stop();
          that.setData({ audioSeek: 0, audioTime: 0, audioDuration: duration, isPlayAudio: false, showTime1: `00:00` });
          return false;
        }
        //正常播放，更改进度信息，更改播放时间信息
        that.setData({ audioSeek: seek + 1, audioTime: time, audioDuration: duration, showTime1: `${min}:${sec}`, showTime2: `${min1}:${sec1}` });
      }
    }, 1000);
  },
  onUnload:function(){
    //卸载页面，清除计步器
    clearInterval(this.data.durationIntval);
  }
})

wxml里面的两张图片是在assets目录下的2个图片，一张为播放，一张为暂停

下面是私货：

在我进行开发的时候，还没有搭建自己的服务器，在线音源很难找，后面找到两篇帖子讲的是如何获取酷我音乐的音乐真实路径；我根据那两篇帖子，写了一个简单的nodeJs的demo；（以下为nodejs代码）

首先进入酷我音乐，打开歌曲详情播放页面，找到地址栏中的神秘数字

如：http://www.kuwo.cn/yinyue/54436859?catalog=yueku2016 中就是 54436859

使用node或者webstorm等运行下方js，在地址栏输入 localhost:8080?id=神秘数字

单击回车，页面就会显示歌曲的真实路径，然后就可以在自己想引用的地方使用了；

（本方法编辑于2018/09/19）

//酷我音乐，音乐路径抓取
//网址：http://www.kuwo.cn
var http = require('http');
var url=require('url');
var reg1=/<mp3dl>/;
var reg2=/<\/mp3dl>/;
var reg3=/<mp3path>/;
var reg4=/<\/mp3path>/;


http.createServer(function(req,res1){
    if(req.url!='/favicon.ico'){
        //音乐的id,先进入歌曲详情播放页，在地址栏中http://www.kuwo.cn/yinyue/40425292?catalog=yueku2016   在yinyue/ 后方 ？ 前方的数字, 如 40425292
        var musicId=req.url.split('=');
        musicId=musicId[1];
        var url = 'http://player.kuwo.cn/webmusic/st/getNewMuiseByRid?rid=MUSIC_'+musicId;
        http.get(url, function(res) {
            var html = '';
            // 获取页面数据
            res.on('data', function(data) {
                html += data;
            });
            // 数据获取结束
            res.on('end', function() {
                var mp3dl=html.split(reg1);
                mp3dl=mp3dl[1].split(reg2);
                var mp3path=html.split(reg3);
                mp3path=mp3path[1].split(reg4);
                var outPut='http://'+mp3dl[0]+'/resource/'+mp3path[0];
                res1.end(outPut);
            });
        }).on('error', function() {
            console.log('获取数据出错！');
        });
    }
}).listen(8001);

C沉冰

关注

19
点赞
踩
56

收藏

觉得还不错? 一键收藏
3
评论
微信小程序带可拖动进度条和时间显示的音频播放器

已更新更为强大版本的具有背景播放功能的播放器，以下为传送门：https://blog.csdn.net/qq_42228034/article/details/100578572此版本仅具有参考意义周知，微信官方自带的音频播放器是没有进度条的，为了实现有进度条，并且拖动，只能自己写一个了；下面是演示图①页面加载完成后，能够直接显示音频的时长②播放时，进度条变化，播放时间...
复制链接

扫一扫