微信小程序音频播放

Posted 2020-09-21 将心比心

小程序音频播放；不废话直接上代码：

 

index.wxml

<!--index.wxml-->
<view class="mycontent">
  <view class="swiper-tab">
  <view class="swiper-tab-list {{currentTab==0 ? ‘on‘ : ‘‘}}" data-current="0" bindtap="swichNav">系统复习</view>
  <view class="swiper-tab-list {{currentTab==1 ? ‘on‘ : ‘‘}}" data-current="1" bindtap="swichNav">难点突破</view>
  <view class="swiper-tab-list {{currentTab==2 ? ‘on‘ : ‘‘}}" data-current="2" bindtap="swichNav">统计</view>
  </view>
</view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight-31}}px" bindchange="bindChange">
  <!-- 系统复习 -->
  <swiper-item>

    <view class="stop-icon">
    <image style="display:block;width:100px;height:100px;" bindtap="{{playAction}}" src="{{cdrom}}" ></image>

    </view>

    <view class="cat-name">
      {{music_name}} - {{author}}
    </view>
    <view class="classname">
    <audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{music}}" id="myAudio"  bindplay="funplay" bindpause="funpause" bindtimeupdate="funtimeupdate" bindended="funended" binderror="funerror"></audio>
    </view>
    <view class="pro">
      <view class="proleft">{{starttime}}</view>
      <view class="procenter body-view"><slider bindchange="sliderchange" value="{{offset}}" min="0" max="{{max}}"/></view>
      <view class="proright">{{duration}}</view>
     
    </view>
  </swiper-item>

  <!-- 难点突破 -->
  <swiper-item>
    <view class="classname">这里是难点页面</view>
  </swiper-item>

  <!-- 统计 -->
  <swiper-item>
    <view class="classname">这里是统计页面</view>
  </swiper-item>




</swiper>

index.wxss

/**index.wxss**/
.mycontent{padding:10rpx 0 ;}
.swiper-tab{
  width:100%;text-align: center;line-height: 80rpx;
}
.swiper-tab-list{
  font-size: 30rpx;display: inline-block;width:33.33%;color: #777777;
}
.on{color:#333;border-bottom: 5rpx solid #78CA5C;}
.swiper-box{display:block;height: 100%;width: 100%;overflow: hidden;}
.swiper-box view {text-align: center;}
.stop-icon{width:100px;height: 100px;margin:30rpx auto;border-radius: 50%;border:3rpx solid #ccc;}
.cat-name{padding:20rpx 0; }
.pro{width:90%;margin:0 auto;}
.proleft{width:20%;}
.proright {width: 20%;}
.procenter{width:50%;}
.proleft,.procenter,.proright{display: inline-block;}

 

js代码：

 

//index.js


//获取应用实例

var app = getApp()
Page({
  data: {
    motto: ‘Hello World‘,
    userInfo: {},
    winWidth:0,
    winHeight:0,
    currentTab:0,
    cdrom:‘../../resources/kind/play.png‘,
   // music:‘D:/web/testxcx/resources/audio/001.mp3‘,
    cdrompause: ‘../../resources/kind/pause.png‘,
    playAction:‘audioPlay‘,
    starttime:‘00:00‘,
    duration:‘05:00‘
    

  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: ‘../logs/logs‘
    })
  },
  onLoad: function () {
    console.log(‘onLoad‘)
    var that = this
    this.audioCtx = wx.createAudioContext(‘myAudio‘)
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo,
        text:‘111111‘
      })
    });

    //获取系统信息
    wx.getSystemInfo({
      success: function(res) {
        that.setData(
          {
            winWidth:res.windowWidth,
            winHeight:res.windowHeight
          }
        );
      }
    });

    //测试异步请求
    wx.request({
      url: ‘http://test.com/xcx.php‘,
      data:{},
      success:function(msg){
        that.setData(
          {
            music_name: msg.data.music_name,
            author: msg.data.author,
            music:msg.data.music_url
          }
        );
      }
    });



  },
  /**
   * 滑动切换tab
   */
   bindChange:function(e){
      var that = this;
      that.setData({currentTab:e.detail.current});
   },
   /**
    * @desc 点击切换 
    * 
    */
    swichNav:function(e){
      var that = this ;
      if(this.data.currentTab === e.target.dataset.current){
        return false;
      }else{
        that.setData({
          currentTab:e.target.dataset.current
        })
      }
    },
  /**
   * @author weizenghui
   *  @version 1.0
   * @desc 播放按钮
   */
    audioPlay:function(){
      var that = this ;
      this.audioCtx.play();
      that.setData({
        playAction: ‘audioPause‘,
        cdrom: ‘../../resources/kind/pause.png‘
      })
      
    },
  /**
   * @desc 停止按钮
   * 
   */
  audioPause: function () {
      var that = this;
      this.audioCtx.pause();
      that.setData({
        playAction: ‘audioPlay‘,
        cdrom: ‘../../resources/kind/play.png‘
      })

    },
  /**
   * @desc 播放进度触发
   * 
   */
  funtimeupdate:function(e){
    var offset = e.detail.currentTime;
    var currentTime = parseInt(e.detail.currentTime);
    var min = parseInt(currentTime / 60 );
    var max = parseInt(e.detail.duration);
    var sec = currentTime % 60 ;
    var starttime = min + ‘:‘ + sec ;
    var duration = e.detail.duration;
    var offset = parseInt (offset * 100 / duration);
    var that = this;
    that.setData({
      offset: currentTime,
      starttime: starttime,
      max:max
    })
  },

  /**
   * @desc 拖动进度条
   * 
   */
  sliderchange:function(e){
    console.log(e);
    var offset = parseInt( e.detail.value );
    this.audioCtx.seek(offset);
    
  },

  /**
   * @desc 当播放完毕时请求下一个音频
   * @author
   */
  funended:function(e){
    
    var that = this;
    //this.audioCtx.pause();

    wx.request({
      url: ‘http://test.com/xcx.php?next=1‘,
      data: {},
      success: function (msg) {
        
        that.setData(
          {
            music_name: msg.data.music_name,
            author: msg.data.author,
            music: msg.data.music_url
          }
        );
        that.audioCtx.setSrc(msg.data.music_url);
        that.audioCtx.play();
        
      }
     
    });
    
  }


})