> 本文主要介紹一下音頻組建，官方推薦使用API方式進行創建，而不建議[使用組建方式](https://uniapp.dcloud.io/component/audio)，因為靈活性差，所以使用API方式進行替換 [TOC] ## 播放音頻 （使用 uni.createInnerAudioContext） > 高階示例代碼，可參考hello-uni里的demo > 官方文檔：https://uniapp.dcloud.io/api/media/audio-context ~~~ <template> <view class="page"> <button type="default" @tap="play">播放或繼續音樂</button> <button type="default" @tap="pause">暫停音樂</button> <button type="default" @tap="stop">停止音樂</button> </view> </template> <script> // 地址可在 http://www.gequdaquan.net/gqss/ 獲取 const audioUrl = 'http://m7.music.126.net/20201009174647/76faa967ae92e6b239a950157923c6c1/ymusic/8e8b/9cae/42b8/f4b218f89f27791d1defdfaa4a4862e7.mp3' const innerAudioContext = uni.createInnerAudioContext(); export default { onLoad() { innerAudioContext.src = audioUrl }, methods: { play() { console.log(innerAudioContext.src) innerAudioContext.play(); }, pause() { innerAudioContext.pause(); }, stop() { innerAudioContext.stop(); } } } </script> ~~~ ## 播放背景音頻 （使用 uni.getBackgroundAudioManager） > 背景音頻就是 App在后臺時，仍然在播放音樂 ~~~ <template> <view> 背景音樂播放中 </view> </template> <script> export default { onLoad() { const bgAudioMannager = uni.getBackgroundAudioManager(); bgAudioMannager.title = '致愛麗絲'; bgAudioMannager.singer = 'wangkun'; bgAudioMannager.coverImgUrl = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uniapp4@2x.png'; bgAudioMannager.src = 'http://m7.music.126.net/20201009174647/76faa967ae92e6b239a950157923c6c1/ymusic/8e8b/9cae/42b8/f4b218f89f27791d1defdfaa4a4862e7.mp3'; } } </script> ~~~ ## 錄音功能 （使用 uni.getRecorderManager） > 官方文檔：https://uniapp.dcloud.io/api/media/record-manager ~~~ <template> <view> <button @tap="startRecord">開始錄音</button> <button @tap="endRecord">停止錄音</button> <button @tap="playVoice">播放錄音</button> </view> </template> <script> const recorderManager = uni.getRecorderManager(); const innerAudioContext = uni.createInnerAudioContext(); innerAudioContext.autoplay = true; var _this; export default { data(){ return { voicePath : '' } }, onLoad() { _this = this; recorderManager.onStop(function(res) { console.log(res) _this.voicePath = res.tempFilePath // 使用uni.uploadFile上傳到服務器上，此時是mp3格式 }); }, methods: { startRecord() { console.log('開始錄音'); recorderManager.start({ sampleRate: 16000 // 必須設置是后臺設置的參數，不然百度語音識別不了 }); }, endRecord() { console.log('錄音結束'); _this = this; recorderManager.stop(); }, playVoice() { console.log('播放錄音'); if (this.voicePath) { innerAudioContext.src = this.voicePath; innerAudioContext.play(); } } } } </script> ~~~