一、案例概述本案例演示了微信小程序中image組件的使用方法、InnerAudioContext音頻上下文的創(chuàng)建與控制、數(shù)據(jù)綁定和事件綁定、onLoad生命周期函數(shù)等功能。實(shí)現(xiàn)效果頁(yè)面上顯示一幅圖片點(diǎn)擊圖片時(shí)播放音樂(lè)再次點(diǎn)擊暫停播放依次交替。功能擴(kuò)展增加了播放速度控制慢速/正常/快速并在每次播放和暫停時(shí)在控制臺(tái)打印當(dāng)前音頻的播放位置和播放速率。二、項(xiàng)目結(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存放在微信云開(kāi)發(fā)的云存儲(chǔ)中通過(guò)云存儲(chǔ)下載鏈接https URL引用頁(yè)面中不再需要本地的images和audios目錄。二點(diǎn)五、云開(kāi)發(fā)環(huán)境初始化使用云存儲(chǔ)資源前需要在app.js中初始化云開(kāi)發(fā)環(huán)境App({onLaunch(){wx.cloud.init({env:cloud1-d6gbuj3063c9c4451})}})代碼解析onLaunch是小程序啟動(dòng)時(shí)觸發(fā)的生命周期函數(shù)適合做云開(kāi)發(fā)環(huán)境的初始化。wx.cloud.init()初始化云開(kāi)發(fā)能力env參數(shù)指定云環(huán)境ID。初始化后小程序就可以訪問(wèn)該環(huán)境下的云存儲(chǔ)、云數(shù)據(jù)庫(kù)、云函數(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屬性通過(guò)數(shù)據(jù)綁定{{imgSrc}}指定圖片路徑。bind:tapsing實(shí)現(xiàn)了事件綁定點(diǎn)擊圖片后調(diào)用sing()函數(shù)。播放狀態(tài)通過(guò){{isPlaying ? 播放中 : 已暫停}}三元表達(dá)式顯示。三個(gè)按鈕分別綁定setSlow、setNormal、setFast函數(shù)控制播放速度通過(guò)class動(dòng)態(tài)綁定高亮當(dāng)前選中的速度。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(開(kāi)始播放 - 當(dāng)前位置this.audioCtx.currentTime播放速率this.audioCtx.playbackRate);});this.audioCtx.onPause((){console.log(暫停播放 - 當(dāng)前位置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是頁(yè)面生命周期函數(shù)頁(yè)面加載時(shí)觸發(fā)只調(diào)用一次。在此函數(shù)中通過(guò)wx.createInnerAudioContext()創(chuàng)建音頻上下文實(shí)例。audioCtx.src設(shè)置音頻文件的云存儲(chǔ)下載鏈接支持網(wǎng)絡(luò)https地址。audioCtx.playbackRate設(shè)置播放速率1為正常速度0.5為慢速2為快速。onPlay和onPause是音頻事件的監(jiān)聽(tīng)回調(diào)在播放和暫停時(shí)通過(guò)console.log打印當(dāng)前播放位置currentTime和播放速率playbackRate。sing()函數(shù)通過(guò)判斷isPlaying狀態(tài)實(shí)現(xiàn)播放和暫停的交替。onUnload中調(diào)用destroy()銷(xiāo)毀音頻實(shí)例避免內(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;}四、功能擴(kuò)展說(shuō)明4.1 播放速度控制通過(guò)InnerAudioContext的playbackRate屬性實(shí)現(xiàn)按鈕playbackRate值效果慢速0.5半速播放正常1正常速度快速2兩倍速播放點(diǎn)擊不同按鈕時(shí)設(shè)置audioCtx.playbackRate的值即可實(shí)時(shí)改變播放速度。4.2 控制臺(tái)打印播放位置和速率在onPlay和onPause回調(diào)中讀取this.audioCtx.currentTime當(dāng)前播放位置單位秒和this.audioCtx.playbackRate播放速率通過(guò)console.log打印到控制臺(tái)?？刂婆_(tái)輸出示例開(kāi)始播放 - 當(dāng)前位置0播放速率1 暫停播放 - 當(dāng)前位置3.5播放速率1 開(kāi)始播放 - 當(dāng)前位置3.5播放速率2五、關(guān)鍵技術(shù)點(diǎn)總結(jié)image組件通過(guò)src屬性指定圖片路徑支持?jǐn)?shù)據(jù)綁定可以直接使用網(wǎng)絡(luò)圖片地址。事件綁定bind:tap綁定點(diǎn)擊事件點(diǎn)擊后調(diào)用對(duì)應(yīng)的處理函數(shù)。云開(kāi)發(fā)云存儲(chǔ)靜態(tài)資源圖片、音頻上傳到云存儲(chǔ)后通過(guò)下載鏈接引用無(wú)需打包進(jìn)小程序本地目錄節(jié)省小程序包體積。使用前需在app.js中調(diào)用wx.cloud.init()初始化云環(huán)境。InnerAudioContext微信小程序提供的音頻上下文API用于創(chuàng)建和控制音頻播放src支持本地路徑和網(wǎng)絡(luò)https地址。playbackRate屬性控制音頻播放速率支持0.5慢速、1正常、2快速等值。currentTime屬性獲取當(dāng)前音頻的播放位置秒。onLoad生命周期頁(yè)面加載時(shí)觸發(fā)適合做初始化工作。onPlay/onPause事件監(jiān)聽(tīng)音頻播放和暫停事件可以在回調(diào)中獲取音頻狀態(tài)信息。