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

其他 2019-04-03 20:34:05 阅读次数: 0

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

微信：

承接小程序开发

<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("离开")
  // },

})

猜你喜欢

转载自blog.csdn.net/qq_41241504/article/details/86704986
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022