一、案例概述本案例演示了微信小程序中image組件的使用方法、InnerAudioContext音頻上下文的創(chuàng)建與控制、數(shù)據(jù)綁定和事件綁定、onLoad生命周期函數(shù)等功能。實現(xiàn)效果頁面上顯示一幅圖片點擊圖片時播放音樂再次點擊暫停播放依次交替。功能擴展增加了播放速度控制慢速/正常/快速并在每次播放和暫停時在控制臺打印當前音頻的播放位置和播放速率。二、項目結(jié)構(gòu)miniprogram/ ├── app.js ├── app.json ├── app.wxss ├── sitemap.json ├── project.config.json └── pages/ └── index/ ├── index.js ├── index.json ├── index.wxml └── index.wxss圖片文件yanan.webp和音頻文件huiyanan.mp3存放在微信云開發(fā)的云存儲中通過云存儲下載鏈接https URL引用頁面中不再需要本地的images和audios目錄。二點五、云開發(fā)環(huán)境初始化使用云存儲資源前需要在app.js中初始化云開發(fā)環(huán)境App({onLaunch(){wx.cloud.init({env:cloud1-d6gbuj3063c9c4451})}})代碼解析onLaunch是小程序啟動時觸發(fā)的生命周期函數(shù)適合做云開發(fā)環(huán)境的初始化。wx.cloud.init()初始化云開發(fā)能力env參數(shù)指定云環(huán)境ID。初始化后小程序就可以訪問該環(huán)境下的云存儲、云數(shù)據(jù)庫、云函數(shù)等資源。三、核心代碼3.1 index.wxmlviewclasscontainerimagesrc{{imgSrc}}classmy-imagebind:tapsing/imageviewclassstatus{{isPlaying ? 播放中 : 已暫停}}/viewviewclassrate-boxtextclassrate-label播放速度/textbuttonclassrate-btn {{playbackRate 0.5 ? active : }}bind:tapsetSlow慢速/buttonbuttonclassrate-btn {{playbackRate 1 ? active : }}bind:tapsetNormal正常/buttonbuttonclassrate-btn {{playbackRate 2 ? active : }}bind:tapsetFast快速/button/view/view代碼解析image組件的src屬性通過數(shù)據(jù)綁定{{imgSrc}}指定圖片路徑。bind:tapsing實現(xiàn)了事件綁定點擊圖片后調(diào)用sing()函數(shù)。播放狀態(tài)通過{{isPlaying ? 播放中 : 已暫停}}三元表達式顯示。三個按鈕分別綁定setSlow、setNormal、setFast函數(shù)控制播放速度通過class動態(tài)綁定高亮當前選中的速度。3.2 index.jsPage({data:{imgSrc:https://636c-cloud1-d6gbuj3063c9c4451-1508092649.tcb.qcloud.la/yanan.webp?sign9e0e80b8cb5c775acee21e0d2a551edct1792120820,isPlaying:false,playbackRate:1},onLoad(){this.audioCtxwx.createInnerAudioContext();this.audioCtx.srchttps://636c-cloud1-d6gbuj3063c9c4451-1508092649.tcb.qcloud.la/%E6%A1%88%E4%BE%8B2.2%E5%9B%BE%E7%89%87%E4%B8%8E%E5%A3%B0%E9%9F%B3/%E6%A1%88%E4%BE%8B2.2%20%E5%9B%BE%E7%89%87%E4%B8%8E%E5%A3%B0%E9%9F%B3/%E9%9F%B3%E9%A2%91%E8%B5%84%E6%BA%90/huiyanan.mp3?signe978d73e729c4e17d8ab218f042922a3t1792120798;this.audioCtx.playbackRate1;this.audioCtx.onPlay((){console.log(開始播放 - 當前位置this.audioCtx.currentTime播放速率this.audioCtx.playbackRate);});this.audioCtx.onPause((){console.log(暫停播放 - 當前位置this.audioCtx.currentTime播放速率this.audioCtx.playbackRate);});},sing(){if(this.data.isPlaying){this.audioCtx.pause();this.setData({isPlaying:false});}else{this.audioCtx.play();this.setData({isPlaying:true});}},setSlow(){this.audioCtx.playbackRate0.5;this.setData({playbackRate:0.5});},setNormal(){this.audioCtx.playbackRate1;this.setData({playbackRate:1});},setFast(){this.audioCtx.playbackRate2;this.setData({playbackRate:2});},onUnload(){if(this.audioCtx){this.audioCtx.destroy();}}});代碼解析onLoad是頁面生命周期函數(shù)頁面加載時觸發(fā)只調(diào)用一次。在此函數(shù)中通過wx.createInnerAudioContext()創(chuàng)建音頻上下文實例。audioCtx.src設置音頻文件的云存儲下載鏈接支持網(wǎng)絡https地址。audioCtx.playbackRate設置播放速率1為正常速度0.5為慢速2為快速。onPlay和onPause是音頻事件的監(jiān)聽回調(diào)在播放和暫停時通過console.log打印當前播放位置currentTime和播放速率playbackRate。sing()函數(shù)通過判斷isPlaying狀態(tài)實現(xiàn)播放和暫停的交替。onUnload中調(diào)用destroy()銷毀音頻實例避免內(nèi)存泄漏。3.3 index.wxss.container{display:flex;flex-direction:column;align-items:center;padding:40rpx;}.my-image{width:600rpx;height:400rpx;border-radius:20rpx;box-shadow:0 4rpx 20rpxrgba(0,0,0,0.15);}.status{margin-top:30rpx;font-size:30rpx;color:#333;}.rate-box{margin-top:40rpx;display:flex;flex-direction:row;align-items:center;}.rate-label{font-size:28rpx;color:#666;margin-right:10rpx;}.rate-btn{font-size:26rpx;padding:10rpx 30rpx;margin:0 10rpx;background-color:#f0f0f0;color:#333;border-radius:10rpx;line-height:1.5;}.rate-btn.active{background-color:#07c160;color:#fff;}四、功能擴展說明4.1 播放速度控制通過InnerAudioContext的playbackRate屬性實現(xiàn)按鈕playbackRate值效果慢速0.5半速播放正常1正常速度快速2兩倍速播放點擊不同按鈕時設置audioCtx.playbackRate的值即可實時改變播放速度。4.2 控制臺打印播放位置和速率在onPlay和onPause回調(diào)中讀取this.audioCtx.currentTime當前播放位置單位秒和this.audioCtx.playbackRate播放速率通過console.log打印到控制臺?？刂婆_輸出示例開始播放 - 當前位置0播放速率1 暫停播放 - 當前位置3.5播放速率1 開始播放 - 當前位置3.5播放速率2五、關(guān)鍵技術(shù)點總結(jié)image組件通過src屬性指定圖片路徑支持數(shù)據(jù)綁定可以直接使用網(wǎng)絡圖片地址。事件綁定bind:tap綁定點擊事件點擊后調(diào)用對應的處理函數(shù)。云開發(fā)云存儲靜態(tài)資源圖片、音頻上傳到云存儲后通過下載鏈接引用無需打包進小程序本地目錄節(jié)省小程序包體積。使用前需在app.js中調(diào)用wx.cloud.init()初始化云環(huán)境。InnerAudioContext微信小程序提供的音頻上下文API用于創(chuàng)建和控制音頻播放src支持本地路徑和網(wǎng)絡https地址。playbackRate屬性控制音頻播放速率支持0.5慢速、1正常、2快速等值。currentTime屬性獲取當前音頻的播放位置秒。onLoad生命周期頁面加載時觸發(fā)適合做初始化工作。onPlay/onPause事件監(jiān)聽音頻播放和暫停事件可以在回調(diào)中獲取音頻狀態(tài)信息。