小程序音频播放带上下切换音频，带列表选择

Love The Way You Lie 2021-09-18 00:04 402阅读 0赞

### 微信小程序开发交流qq群   581478349 ###

微信：

承接小程序开发

![70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 1][]

<view class=''>
    
      <image class='bg' src='http://img4.imgtn.bdimg.com/it/u=1866686759,3600446626&fm=214&gp=0.jpg' mode='aspectFill'></image>
    </view>
    <view class='item'>
      <view class='toptext_bor'>
        <view class='toptext1'>碎 片 时 间 . 听 见 未 来</view>
        
        <view class='toptext2'>{
       {title}}</view>
      </view>
      
      <image class='audio_post{
       {music_on?" music_on":""}}' style="animation-play-state:{
       {music_playing?'running':'paused'}}" src='{
       {img}}'></image>
    </view>
    <view class='bt_pos'>
      <view class='audio_progress'>
      
        <view class='time'>{
       {starttime}}</view>
        
        <slider block-size='14' bindchange="sliderChange" block-size="12px" step="2" value="{
       {offset}}" max="{
       {max}}" selected-color="#4c9dee"></slider>
        
        <view class='time1'>{
       {duration}}</view>
      </view>
      <view class='audio_control'>
        
        <image src='/img/list.png' class=' rt_img' bindtap='showModal'></image>
        
        <image src='/img/shang.png' class=' anniu_img_sx ' bindtap='play_shang'></image>
        
        <image src='/img/bf.png' class='anniu_img anniu_img_sx' bindtap="listenerButtonPlay" wx:if="{
       {!isOpen}}"></image>
        
        <image src='/img/zt.png' class='anniu_img anniu_img_sx ' bindtap="listenerButtonPause" wx:if="{
       {isOpen}}"></image>
        
        <image src='/img/xia.png' class=' anniu_img_sx ' bindtap='play_xia'></image>
        
        <image src='/img/zf.png' class='rt_img' ></image>
      </view>
    </view>
    
    
    <view style='display:{
       {show}}'>
      <view class='show' bindtap='hide'></view>
      <view class='show_bo' animation="{
       {animationData}}" wx:if="{
       {showModalStatus}}">
        <scroll-view class='for_list' scroll-y='true'>
          <block wx:for='{
       {title_list}}' wx:key=''>
            <block wx:if="{
       {index == clickId}}">
              <view class='bo_list_bot' catchtap='play_list' data-index='{
       {item.id}}' type='primary'>
                <cover-image src='/img/tuwen.png' class='bt_show_img'></cover-image>
                <cover-view>
                  
                  <cover-view class='bo_list_text' style="color:{
       {color}}" id="{
       {index}}" bindtap="play_list" data-data="{
       {item}}">{
       {item.title}}</cover-view>
                  
                  <cover-view class='name_time' style="color:{
       {color}}" id="{
       {index}}" bindtap="play_list" data-data="{
       {item}}">{
       {item.name}} {
       {item.time}}</cover-view>
                </cover-view>
    
                <view style='  margin-top: 35rpx;'>
                  <icon type='success' size='20' color='#0b68f3' style=' display: {
       {display_rue}}   '></icon>
                </view>
    
              </view>
    
            </block>
            <block wx:else>
              <view class='bo_list_bot' bindtap='play_list' data-index='{
       {item.id}}' type='primary'>
                <cover-image src='/img/tuwen.png' class='bt_show_img'></cover-image>
                <cover-view>
                  
                  <cover-view class='bo_list_text' id="{
       {index}}" bindtap="play_list" data-data="{
       {item}}">{
       {item.title}}</cover-view>
                  
                  <cover-view class='name_time' id="{
       {index}}" bindtap="play_list" data-data="{
       {item}}">{
       {item.name}} {
       {item.time}}</cover-view>
                </cover-view>
              </view>
            </block>
          </block>
        </scroll-view>
        <cover-view class='none' bindtap='hide'>取消</cover-view>
      </view>
    </view>

/* pages/dh/dh.wxss */
    
    page {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
    }
    
    .toptext_bor {
      color: #a5a5a5;
      width: 100%;
      font-size: 36rpx;
      text-align: center;
    }
    
    .toptext2 {
      color: #fff;
      font-size: 46rpx;
      margin: 50rpx 60rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .bg {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      filter: blur(10px);
      transform: scale(1.1);
      z-index: -1;
    }
    
    .item {
      z-index: 10;
      width: 100vw;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-top: 50rpx;
    }
    
    .item text {
      font-size: medium;
    }
    
    .bt_pos {
      position: absolute;
      bottom: 40rpx;
    }
    
    .audio_progress {
      padding-bottom: 30rpx;
      width: 100vw;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }
    
    .audio_progress slider {
      width: 430rpx;
    }
    
    .audio_progress view {
      padding: 18rpx;
    }
    
    .time {
      color: #fff;
      font-size: 26rpx;
      width: 40rpx;
      margin-top: 10rpx;
    }
    
    .time1 {
      color: #fff;
      font-size: 26rpx;
      width: 40rpx;
      margin-top: 10rpx;
      margin-left: -60rpx;
    }
    
    .audio_post {
      width: 300rpx;
      height: 300rpx;
      margin: 100rpx auto;
      border-radius: 50%;
    }
    
    /* 旋转的样式 */
    
    .music_on {
      animation: audio-rotate 8s linear infinite;
    }
    
    .audio_control {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }
    
    .audio_control button {
      width: 200rpx;
      height: 80rpx;
      line-height: 80rpx;
    }
    
    /* 旋转动画 */
    
    @keyframes audio-rotate {
      0% {
        transform: rotateZ(0deg);
      }
    
      100% {
        transform: rotateZ(360deg);
      }
    }
    
    .anniu_img {
      width: 100rpx;
      height: 100rpx;
    }
    
    .anniu_img_sx {
      width: 70rpx;
      height: 70rpx;
      margin-top: 10rpx;
    }
    
    .rt_po_ab {
      position: absolute;
      bottom: 280rpx;
      right: 20rpx;
      width: 80rpx;
      text-align: center;
      color: #fff;
      font-size: 28rpx;
    }
    
    .rt_img {
      width: 50rpx;
      height: 50rpx;
      margin-top: 20rpx;
    }
    
    .show {
      background: rgba(2, 2, 2, 0.603);
      width: 100vw;
      height: 100vh;
      position: absolute;
      top: 0;
      right: 0rpx;
      left: 0rpx;
      bottom: 0rpx;
      z-index: 500rpx;
    }
    
    .bt_bo_pos {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: #fff;
    }
    
    .show_bo {
      background: #fff;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      height: 800rpx;
      padding: 50rpx 20rpx;
      border-top-left-radius: 20rpx;
      border-top-right-radius: 20rpx;
    }
    
    /* //影藏滚动条 */
    
    ::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
    }
    
    .none {
      position: absolute;
      bottom: 0;
      width: 100%;
      text-align: center;
      color: #0b68f3;
      margin-top: 120rpx;
      line-height: 80rpx;
      font-size: 28rpx;
    }
    
    .bt_show_img {
      width: 30rpx;
      height: 30rpx;
      padding: 5rpx 10rpx;
      background: rgb(231, 230, 230);
      margin-top: 35rpx;
    }
    
    .bo_list_bot {
      display: flex;
      flex-direction: row;
      /* padding: 30rpx 10rpx; */
      font-size: 26rpx;
      border-bottom: 1rpx solid rgb(223, 223, 223);
    }
    
    .for_list {
      height: 780rpx;
    }
    
    .bo_list_text {
      margin-left: 10rpx;
      width: 600rpx;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      line-height: 100rpx;
    }
    .name_time{
      margin-top: -20rpx;
      color: #aaa8a8;
      font-size: 24rpx;
      margin-left: 60rpx;
      padding-bottom: 20rpx;
    }

//index.js
    //获取应用实例
    const bgMusic = wx.createInnerAudioContext()
    const app = getApp()
    //动画
    var audioAnimation;
    Page({
      data: {
        index: '2',
        title_list: [{
          name: 'Anmber',
          time: '2019-1-1',
          title: '元宝妈妈：拇指姑娘',
          src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
          id: 0,
          img: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
        }, {
          name: 'Anmber',
          time: '2019-1-1',
          src: 'http://www.ytmp3.cn/down/56773.mp3',
          title: '元宝妈妈：《格林童话》拇指姑娘',
          img: '../../img/Rotation_chart.jpg',
          id: 1
        }, {
          name: 'Anmber',
          time: '2019-1-1',
          src: 'http://www.ytmp3.cn/down/56778.mp3',
          title: '《格林童话》 元宝妈妈：《格林童话》拇指姑娘元宝妈妈：《格林童话》拇指姑娘',
          img: '../../img/x.jpg',
          id: 2
        }, {
          name: 'Anmber',
          time: '2019-1-1',
          src: 'http://www.ytmp3.cn/down/32476.mp3',
          title: '拇指姑娘',
          img: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
          id: 3
        }, {
          name: 'Anmber',
          time: '2019-1-1',
          src: 'http://www.ytmp3.cn/down/56778.mp3',
          title: '元宝妈妈',
          img: '../../img/Rotation_chart.jpg',
          id: 4
        }, {
          name: 'Anmber',
          time: '2019-1-1',
          src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
          title: '元宝妈妈拇指姑娘',
          img: '../../img/x.jpg',
          id: 5
        }, {
          name: 'Anmber',
          time: '2019-1-1',
          src: 'http://www.ytmp3.cn/down/56778.mp3',
          title: '《格林童话》拇指姑娘',
          img: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
          id: 6
        }, {
          name: 'Anmber',
          time: '2019-1-1',
          src: 'http://www.ytmp3.cn/down/32476.mp3',
          title: '元宝妈妈：《格林童话》拇指姑娘',
          img: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
          id: 7
        }, ],
        // 默认动态高度
        heighTrue: true,
        // 底部弹窗动画
        showModalStatus: false,
        //列表弹窗显隐
        show: 'none',
        //播放开关
        isOpen: false,
        //正在播放时长
        starttime: '00:00', 
         //总时长
        duration: '00:00',
         //音乐是不是在播放 
        music_on: true,
        //显示的时间  
        music_playing: false, 
      },
      onLoad: function() {
        var that = this
        // 获取应的音频
        that.s_p()
      },
      //上
      play_shang: function() {
        var that = this
        var id = parseInt(this.data.index)
        var num = id - 1
        if (id - 1 < 0) {
          wx.showToast({
            title: '已是第一个',
          })
        } else {
          this.setData({
            music_on: false,
            index: num,
            'color': '#0b68f3',
            'clickId': num,
            src: '',
            duration: '',
          })
          that.s_p()
        }
      },
      // 下
      play_xia: function() {
        // console.log(this.data.title_list)
        var that = this
        var id = parseInt(this.data.index)
        var num = id + 1
    
        if (id + 1 > this.data.title_list.length - 1) {
          wx.showToast({
            title: '已是最后一个',
          })
        } else {
          this.setData({
            music_on: false,
            index: num,
            'color': '#0b68f3',
            'clickId': num,
            src: '',
            duration: '',
          })
          that.s_p()
        }
      },
      // 视频获取
      s_p: function() {
        var that = this
        //(src音频名字)
        var src = this.data.title_list[this.data.index].src 
        //(图片音频名字)
        var img = this.data.title_list[this.data.index].img 
        //(标题音频名字)
        var title = this.data.title_list[this.data.index].title 
        this.setData({
          'color': '#0b68f3',
          'clickId': this.data.index,
          src: src,
          img: img,
          title: title
        })
        that.listenerButtonPlay()
      },
      // 点击列表切换
      play_list: function(e) {
        // console.log(e)
        var that = this
        var id = e.target.id
        that.setData({
          'color': '#0b68f3',
          'clickId': id,
          index: id,
          display_rue: 'block',
        });
        if (this.data.src == '') {
          that.s_p()
          that.setData({
            'color': '#0b68f3',
            'clickId': id,
            index: id,
            display_rue: 'block',
          });
        } else {
          that.listenerButtonPlay()
          that.setData({
            'color': '#0b68f3',
            'clickId': id,
            index: id,
            display_rue: 'block',
            src: ''
          });
        }
      },
      //弹窗显示
      showModal: function() {
        var that = this
        this.setData({
          show: 'block'
        })
        var animation = wx.createAnimation({
          duration: 200,
          timingFunction: "linear",
          delay: 0
        })
        this.animation = animation
        animation.translateY(300).step()
        this.setData({
          animationData: animation.export(),
          showModalStatus: true,
          heighTrue: false,
          ball_height: 1,
          show: 'block'
        })
        setTimeout(function() {
          animation.translateY(0).step()
          this.setData({
            animationData: animation.export()
          })
        }.bind(this), 200)
      },
      //隐藏
      hide: function() {
        // 隐藏遮罩层
        var animation = wx.createAnimation({
          duration: 200,
          timingFunction: "linear",
          delay: 0
        })
        this.animation = animation
        animation.translateY(300).step()
        this.setData({
          animationData: animation.export(),
        })
        setTimeout(function() {
          animation.translateY(0).step()
          this.setData({
            animationData: animation.export(),
            showModalStatus: false,
            heighTrue: true,
            ball_height: 2,
            show: 'none',
          })
        }.bind(this), 200)
      },
      // 播放
      listenerButtonPlay: function(e) {
        var that = this
        //bug ios 播放时必须加title 不然会报错导致音乐不播放 
        // console.log(this.data.index)
        var sec = this.data.src
        bgMusic.title = '此时此刻'
        bgMusic.epname = '此时此刻'
        bgMusic.src = that.data.src;
        this.data.music_on = true;
        this.data.music_playing = true;
        bgMusic.play(); //图片添加css样式，旋转样式   
        this.setData({
          music_on: true,
          music_playing: this.data.music_playing,
        })
        bgMusic.onTimeUpdate(() => {
          //bgMusic.duration总时长  bgMusic.currentTime当前进度
          // console.log(bgMusic.currentTime)
          var duration = bgMusic.duration;
          var offset = bgMusic.currentTime;
          var currentTime = parseInt(bgMusic.currentTime);
          var min = "0" + parseInt(currentTime / 60);
          var max = parseInt(bgMusic.duration);
          var sec = currentTime % 60;
          var maxtime = max / 60
          var max_time = parseInt(maxtime);
          var x_maxtime = maxtime - max_time;
          var yu_time = parseInt(x_maxtime * 60)
          if (sec < 10) {
            sec = "0" + sec;
          };
          var starttime = min + ':' + sec; /*  00:00  */
          var time_time = max_time + ':' + yu_time
          that.setData({
            isOpen: true,
            duration: time_time,
            offset: currentTime,
            starttime: starttime,
            max: max,
            changePlay: true,
          })
        })
        // 播放出错
        bgMusic.onError((res) => {
       that.prompt.message('网络出错，稍后再试')
        })
        // 播放结束
        bgMusic.onEnded((res) => {
          // console.log('录音播放结束');
          var that = this
          var id = parseInt(this.data.index)
          var num = id + 1
    
          if (id + 1 > this.data.title_list.length - 1) {
            wx.showToast({
              title: '已是最后一个',
            })
          } else {
            this.setData({
              music_on: false,
              index: num,
              'color': '#0b68f3',
              'clickId': num,
              src: '',
              duration: '',
            })
            that.s_p()
          }
        })
      },
      //暂停播放
      listenerButtonPause() {
        this.data.music_on = true;
        this.data.music_playing = false;
        var that = this
        bgMusic.pause()
        that.setData({
          isOpen: false,
          music_on: this.data.music_on,
          music_playing: this.data.music_playing,
        })
      },
      // 进度条拖拽
      sliderChange(e) {
        var that = this
        var offset = parseInt(e.detail.value);
        bgMusic.play();
        bgMusic.seek(offset);
        that.setData({
          isOpen: true,
        })
      },
      // 页面卸载时停止播放
      // onUnload() {
      //   var that = this
      //   that.listenerButtonStop() //停止播放
      //   console.log("离开")
      // },
    
    })

[70]: https://img-blog.csdn.net/20180922193022472?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70]: /images/20210724/5f981ab4eafc40fca42638720071932c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 1]: /images/20210724/dbedd84e59964b7da7e8e5742ea3b226.png