微信小程序API之audio

逃离我推掉我的手 2023-10-04 15:16 71阅读 0赞

### 微信小程序API之audio ###

wxml:

<text>pages/audio/audio.wxml</text>
    <view class="container">
    </view>
    
    <button bindtap="tapPlay">播放</button>
    <button bindtap="tapPause">暂停 </button>
    
    <slider
    min="0"
    max="100"
    step="1"
    disabled="{
         {true}}"
    value="0"
    show-value="{
         {true}}"
    backgroundColor="#e9e9e9"
    block-size="20"
    block-color="#ffffff"
    
    ></slider>

js:

//音频实例
    const audio=wx.createInnerAudioContext();
    
    // pages/audio/audio.js
    Page({
        
    
        /**
         * 页面的初始数据
         */
        data: {
        
    
            value:0
    
        },
        //播放
        tapPlay(e){
        
            audio.play()
            console.log('正在播放ing...')
            //半秒监听一次
            setTimeout(()=>{
        
                //监听播放进度
                audio.onTimeUpdate(()=>{
        
                    //输出音频总时长
                    console.log(audio.duration);
                    //输出当前的播放位置
                   console.log(audio.currentTime);
    
                   //实时更新进度条
                  this.setData({
        
                      value:audio.currentTime
                  })
    
                })
             },500)
           
         },
        
        //暂停
        tapPause(e){
        
            audio.pause()
            console.log('暂停播放ed...');
        },
    
    
        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {
        
            //是否自动播放
            audio.autoplay=false
    
            //地址
            audio.src='https://mp32.9ku.com/upload/128/2020/02/13/1002010.mp3'
    
        },
    
        /**
         * 生命周期函数--监听页面初次渲染完成
         */
        onReady: function () {
        
    
        },
    
        /**
         * 生命周期函数--监听页面显示
         */
        onShow: function () {
        
    
        },
    
        /**
         * 生命周期函数--监听页面隐藏
         */
        onHide: function () {
        
    
        },
    
        /**
         * 生命周期函数--监听页面卸载
         */
        onUnload: function () {
        
    
        },
    
        /**
         * 页面相关事件处理函数--监听用户下拉动作
         */
        onPullDownRefresh: function () {
        
    
        },
    
        /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom: function () {
        
    
        },
    
        /**
         * 用户点击右上角分享
         */
        onShareAppMessage: function () {
        
    
        }
    })