本文主要和大家分享微信小程式開發(fā)錄音機(jī)、音訊播放、動(dòng)畫，希望能幫助大家。
1.為了進(jìn)來看得清楚??.剛開始沒有載入音訊清單.程式碼往前挪一挪即可.
##2.按住錄音按鈕的時(shí)候會(huì)出現(xiàn)麥克風(fēng).中間的麥克風(fēng)是個(gè)幀動(dòng)畫.
其實(shí)就是用js控制圖片顯示隱藏.沒啥好說的.這裡值得說一說的是錄音.微信的錄音API後,如果錄音時(shí)間太短,會(huì)錄音失敗.所以fail的時(shí)候還是需要處理一下.錄音時(shí)間的限制和微信語音是一樣的.60秒.
#3.錄音完成後才載入清單.
下圖就是從微信儲(chǔ)存的檔案裡取得到的清單資訊.有儲(chǔ)存路徑,建立時(shí)間,檔案大小.
這裡的檔案可能不只是音頻.這裡我沒做判斷.下面的路徑都是wx:file//store_...
#我也去找了下.在Tencent/micromsg/wxafiles/ wx..../這一級(jí)目錄就能找到了.
時(shí)間是格式化之後的.檔案大小是B,轉(zhuǎn)成KB如下.
手機(jī)目錄如下.但開啟之後播放不了.目前原因不明.
#下面是檔案全名稱.
1.tempFilePath : 錄音之後的臨時(shí)檔案.第二次進(jìn)入小程式就不能正常使用了.
2.savedFilePath :持久保存的檔案路徑.值得注意的是微信只給100M的儲(chǔ)存空間.還是盡早上傳到後臺(tái)吧.
#4.播放錄音音訊.
點(diǎn)擊item就能聽到你的聲音了.別被自己嚇住.哈哈.
#上程式碼:
#########1.index.wxml##### ##<!--index.wxml-->
<scroll-view>
<view wx:if="{{voices}}" class="common-list" style="margin-bottom:120rpx;">
<block wx:for="{{voices}}">
<view class="board">
<view class="cell" >
<view class="cell-bd" data-key="{{item.filePath}}" bindtap="gotoPlay" >
<view class="date">存儲(chǔ)路徑:{{item.filePath}}</view>
<view class="date" >存儲(chǔ)時(shí)間:{{item.createTime}}</view>
<view class="date">音頻大小:{{item.size}}KB</view>
</view>
</view>
</view>
</block>
</view>
</scroll-view>
<view wx:if="{{isSpeaking}}" class="speak-style">
<image class="sound-style" src="../../images/voice_icon_speech_sound_1.png" ></image>
<image wx:if="{{j==2}}" class="sound-style" src="../images/voice_icon_speech_sound_2.png" ></image>
<image wx:if="{{j==3}}" class="sound-style" src="../images/voice_icon_speech_sound_3.png" ></image>
<image wx:if="{{j==4}}" class="sound-style" src="../images/voice_icon_speech_sound_4.png" ></image>
<image wx:if="{{j==5}}"class="sound-style" src="../images/voice_icon_speech_sound_5.png" ></image>
</view>
<view class="record-style">
<button class="btn-style" bindtouchstart="touchdown" bindtouchend="touchup">按住 錄音</button>
</view>###############2.index.wxss#######/**index.wxss**/
.speak-style{
position: relative;
height: 240rpx;
width: 240rpx;
border-radius: 20rpx;
margin: 50% auto;
background: #26A5FF;
}
.item-style{
margin-top: 30rpx;
margin-bottom: 30rpx;
}
.text-style{
text-align: center;
}
.record-style{
position: fixed;
bottom: 0;
left: 0;
height: 120rpx;
width: 100%;
}
.btn-style{
margin-left: 30rpx;
margin-right: 30rpx;
}
.sound-style{
position: absolute;
width: 74rpx;
height:150rpx;
margin-top: 45rpx;
margin-left: 83rpx;
}
.board {
overflow: hidden;
border-bottom: 2rpx solid #26A5FF;
}
/*列布局*/
.cell{
display: flex;
margin: 20rpx;
}
.cell-hd{
margin-left: 10rpx;
color: #885A38;
}
.cell .cell-bd{
flex:1;
position: relative;
}
/**只顯示一行*/
.date{
font-size: 30rpx;
text-overflow: ellipsis;
white-space:nowrap;
overflow:hidden;
}##############3.index.js ######//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
data: {
j: 1,//幀動(dòng)畫初始圖片
isSpeaking: false,//是否正在說話
voices: [],//音頻數(shù)組
},
onLoad: function () {
},
//手指按下
touchdown: function () {
console.log("手指按下了...")
console.log("new date : " + new Date)
var _this = this;
speaking.call(this);
this.setData({
isSpeaking: true
})
//開始錄音
wx.startRecord({
success: function (res) {
//臨時(shí)路徑,下次進(jìn)入小程序時(shí)無法正常使用
var tempFilePath = res.tempFilePath
console.log("tempFilePath: " + tempFilePath)
//持久保存
wx.saveFile({
tempFilePath: tempFilePath,
success: function (res) {
//持久路徑
//本地文件存儲(chǔ)的大小限制為 100M
var savedFilePath = res.savedFilePath
console.log("savedFilePath: " + savedFilePath)
}
})
wx.showToast({
title: '恭喜!錄音成功',
icon: 'success',
duration: 1000
})
//獲取錄音音頻列表
wx.getSavedFileList({
success: function (res) {
var voices = [];
for (var i = 0; i < res.fileList.length; i++) {
//格式化時(shí)間
var createTime = new Date(res.fileList[i].createTime)
//將音頻大小B轉(zhuǎn)為KB
var size = (res.fileList[i].size / 1024).toFixed(2);
var voice = { filePath: res.fileList[i].filePath, createTime: createTime, size: size };
console.log("文件路徑: " + res.fileList[i].filePath)
console.log("文件時(shí)間: " + createTime)
console.log("文件大小: " + size)
voices = voices.concat(voice);
}
_this.setData({
voices: voices
})
}
})
},
fail: function (res) {
//錄音失敗
wx.showModal({
title: '提示',
content: '錄音的姿勢(shì)不對(duì)!',
showCancel: false,
success: function (res) {
if (res.confirm) {
console.log('用戶點(diǎn)擊確定')
return
}
}
})
}
})
},
//手指抬起
touchup: function () {
console.log("手指抬起了...")
this.setData({
isSpeaking: false,
})
clearInterval(this.timer)
wx.stopRecord()
},
//點(diǎn)擊播放錄音
gotoPlay: function (e) {
var filePath = e.currentTarget.dataset.key;
//點(diǎn)擊開始播放
wx.showToast({
title: '開始播放',
icon: 'success',
duration: 1000
})
wx.playVoice({
filePath: filePath,
success: function () {
wx.showToast({
title: '播放結(jié)束',
icon: 'success',
duration: 1000
})
}
})
}
})
//麥克風(fēng)幀動(dòng)畫
function speaking() {
var _this = this;
//話筒幀動(dòng)畫
var i = 1;
this.timer = setInterval(function () {
i++;
i = i % 5;
_this.setData({
j: i
})
}, 200);
}#########注意:################1.錄音的音訊預(yù)設(shè)是存在本地的臨時(shí)路徑下.第二次進(jìn)入小程式無法正常使用,可以存持久,但是本地檔案大小的限制是100M,最好還是上傳後臺(tái).######2.錄音的時(shí)間不能太短.否則會(huì)失敗;也不能超過60秒.到了60秒會(huì)自動(dòng)停止錄音.
3.音頻播放不能同時(shí)播放多個(gè)音頻.看文檔.微信小程序 播放音頻文檔
1.為了進(jìn)來看得清楚.剛開始沒有加載音頻列表.代碼往前挪一挪即可.
2.按住 錄音按鈕的時(shí)候會(huì)出現(xiàn)麥克風(fēng).中間的麥克風(fēng)是個(gè)幀動(dòng)畫.
其實(shí)就是用js控制圖片顯示隱藏.沒啥好說的.這里值得說一說的是錄音.微信的錄音API后,如果錄音時(shí)間太短,會(huì)錄音失敗.所以fail的時(shí)候還是需要處理一下.錄音時(shí)間的限制和微信語音是一樣的.60秒.
3.我在錄音完成后才加載列表.
下圖就是從微信存儲(chǔ)的文件里獲取到的列表信息.有儲(chǔ)存路徑,創(chuàng)建時(shí)間,文件大小.
這里的文件可能不只是音頻.這里我沒做判斷.下面的路徑都是wx:file//store_...
我也去找了下.在Tencent/micromsg/wxafiles/wx..../這一級(jí)目錄就能找到了.
時(shí)間是格式化之后的.文件大小是B,轉(zhuǎn)成KB如下.
手機(jī)目錄如下.但是打開之后播放不了.目前原因不明.
下面是文件全名稱.
1.tempFilePath : 錄音之后的臨時(shí)文件.第二次進(jìn)入小程序就不能正常使用了.
2.savedFilePath :持久保存的文件路徑.值得注意的是微信只給100M的儲(chǔ)存空間.還是盡早上傳到后臺(tái)吧.
4.播放錄音音頻.
點(diǎn)擊item就能聽到你的聲音了.別被自己嚇住.哈哈.
上代碼:
1.index.wxml
<!--index.wxml-->
<scroll-view>
<view wx:if="{{voices}}" class="common-list" style="margin-bottom:120rpx;">
<block wx:for="{{voices}}">
<view class="board">
<view class="cell" >
<view class="cell-bd" data-key="{{item.filePath}}" bindtap="gotoPlay" >
<view class="date">存儲(chǔ)路徑:{{item.filePath}}</view>
<view class="date" >存儲(chǔ)時(shí)間:{{item.createTime}}</view>
<view class="date">音頻大小:{{item.size}}KB</view>
</view>
</view>
</view>
</block>
</view>
</scroll-view>
<view wx:if="{{isSpeaking}}" class="speak-style">
<image class="sound-style" src="../../images/voice_icon_speech_sound_1.png" ></image>
<image wx:if="{{j==2}}" class="sound-style" src="../images/voice_icon_speech_sound_2.png" ></image>
<image wx:if="{{j==3}}" class="sound-style" src="../images/voice_icon_speech_sound_3.png" ></image>
<image wx:if="{{j==4}}" class="sound-style" src="../images/voice_icon_speech_sound_4.png" ></image>
<image wx:if="{{j==5}}"class="sound-style" src="../images/voice_icon_speech_sound_5.png" ></image>
</view>
<view class="record-style">
<button class="btn-style" bindtouchstart="touchdown" bindtouchend="touchup">按住 錄音</button>
</view>2.index.wxss
/**index.wxss**/
.speak-style{
position: relative;
height: 240rpx;
width: 240rpx;
border-radius: 20rpx;
margin: 50% auto;
background: #26A5FF;
}
.item-style{
margin-top: 30rpx;
margin-bottom: 30rpx;
}
.text-style{
text-align: center;
}
.record-style{
position: fixed;
bottom: 0;
left: 0;
height: 120rpx;
width: 100%;
}
.btn-style{
margin-left: 30rpx;
margin-right: 30rpx;
}
.sound-style{
position: absolute;
width: 74rpx;
height:150rpx;
margin-top: 45rpx;
margin-left: 83rpx;
}
.board {
overflow: hidden;
border-bottom: 2rpx solid #26A5FF;
}
/*列布局*/
.cell{
display: flex;
margin: 20rpx;
}
.cell-hd{
margin-left: 10rpx;
color: #885A38;
}
.cell .cell-bd{
flex:1;
position: relative;
}
/**只顯示一行*/
.date{
font-size: 30rpx;
text-overflow: ellipsis;
white-space:nowrap;
overflow:hidden;
}
3.index.js
//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
data: {
j: 1,//幀動(dòng)畫初始圖片
isSpeaking: false,//是否正在說話
voices: [],//音頻數(shù)組
},
onLoad: function () {
},
//手指按下
touchdown: function () {
console.log("手指按下了...")
console.log("new date : " + new Date)
var _this = this;
speaking.call(this);
this.setData({
isSpeaking: true
})
//開始錄音
wx.startRecord({
success: function (res) {
//臨時(shí)路徑,下次進(jìn)入小程序時(shí)無法正常使用
var tempFilePath = res.tempFilePath
console.log("tempFilePath: " + tempFilePath)
//持久保存
wx.saveFile({
tempFilePath: tempFilePath,
success: function (res) {
//持久路徑
//本地文件存儲(chǔ)的大小限制為 100M
var savedFilePath = res.savedFilePath
console.log("savedFilePath: " + savedFilePath)
}
})
wx.showToast({
title: '恭喜!錄音成功',
icon: 'success',
duration: 1000
})
//獲取錄音音頻列表
wx.getSavedFileList({
success: function (res) {
var voices = [];
for (var i = 0; i < res.fileList.length; i++) {
//格式化時(shí)間
var createTime = new Date(res.fileList[i].createTime)
//將音頻大小B轉(zhuǎn)為KB
var size = (res.fileList[i].size / 1024).toFixed(2);
var voice = { filePath: res.fileList[i].filePath, createTime: createTime, size: size };
console.log("文件路徑: " + res.fileList[i].filePath)
console.log("文件時(shí)間: " + createTime)
console.log("文件大小: " + size)
voices = voices.concat(voice);
}
_this.setData({
voices: voices
})
}
})
},
fail: function (res) {
//錄音失敗
wx.showModal({
title: '提示',
content: '錄音的姿勢(shì)不對(duì)!',
showCancel: false,
success: function (res) {
if (res.confirm) {
console.log('用戶點(diǎn)擊確定')
return
}
}
})
}
})
},
//手指抬起
touchup: function () {
console.log("手指抬起了...")
this.setData({
isSpeaking: false,
})
clearInterval(this.timer)
wx.stopRecord()
},
//點(diǎn)擊播放錄音
gotoPlay: function (e) {
var filePath = e.currentTarget.dataset.key;
//點(diǎn)擊開始播放
wx.showToast({
title: '開始播放',
icon: 'success',
duration: 1000
})
wx.playVoice({
filePath: filePath,
success: function () {
wx.showToast({
title: '播放結(jié)束',
icon: 'success',
duration: 1000
})
}
})
}
})
//麥克風(fēng)幀動(dòng)畫
function speaking() {
var _this = this;
//話筒幀動(dòng)畫
var i = 1;
this.timer = setInterval(function () {
i++;
i = i % 5;
_this.setData({
j: i
})
}, 200);
}注意:
1.錄音的音訊預(yù)設(shè)是存在本地的臨時(shí)路徑下.第二次進(jìn)入小程式無法正常使用,可以存持久,但是本地檔案大小的限制是100M,最好還是上傳後臺(tái).
2.錄音的時(shí)間不能太短.否則會(huì)失敗;也不能超過60秒.到了60秒會(huì)自動(dòng)停止錄音.
3.音訊播放不能同時(shí)播放多個(gè)音訊.看文件.微信小程式播放音訊文件
相關(guān)推薦：
#以上是微信小程式開發(fā)錄音機(jī)、音訊播放、動(dòng)畫的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)
熱門話題
如何在 Ubuntu Linux 發(fā)行版錄製串流音訊
Feb 25, 2024 pm 03:46 PM
如何在Ubuntu和其他Linux發(fā)行版中錄製音訊？如果您想透過電腦的麥克風(fēng)錄製畫外音，可以使用GNOME錄音機(jī)或Audacity。使用GNOME錄音機(jī)操作簡(jiǎn)單易懂，但功能較為有限。而對(duì)於Audacity，初次接觸可能會(huì)感到有些吃力，但其擁有許多進(jìn)階的錄音功能。然而，在本教程中不會(huì)深入探討這一點(diǎn)。 GNOME錄音機(jī)可以與麥克風(fēng)搭配使用。另外，還有一種稱為錄音機(jī)的工具，不僅可以使用麥克風(fēng)輸入，還可以錄製串流音樂。在本教學(xué)中，我們將向您展示以下步驟如何使用GNOME錄音機(jī)錄製聲音，使用AudioR
使用Python開發(fā)微信小程式
Jun 17, 2023 pm 06:34 PM
隨著行動(dòng)互聯(lián)網(wǎng)技術(shù)和智慧型手機(jī)的普及，微信成為了人們生活中不可或缺的一個(gè)應(yīng)用。而微信小程式則讓人們可以在不需要下載安裝應(yīng)用程式的情況下，直接使用小程式來解決一些簡(jiǎn)單的需求。本文將介紹如何使用Python來開發(fā)微信小程式。一、準(zhǔn)備工作在使用Python開發(fā)微信小程式之前，需要先安裝相關(guān)的Python函式庫。這裡推薦使用wxpy和itchat這兩個(gè)函式庫。 wxpy是一個(gè)微信機(jī)器
實(shí)作微信小程式中的卡片翻轉(zhuǎn)特效
Nov 21, 2023 am 10:55 AM
實(shí)作微信小程式中的卡片翻轉(zhuǎn)特效在微信小程式中，實(shí)現(xiàn)卡片翻轉(zhuǎn)特效是一種常見的動(dòng)畫效果，可以提升使用者體驗(yàn)和介面互動(dòng)的吸引力。以下將具體介紹如何在微信小程式中實(shí)現(xiàn)卡片翻轉(zhuǎn)的特效，並提供相關(guān)程式碼範(fàn)例。首先，需要在小程式的頁面佈局檔案中定義兩個(gè)卡片元素，一個(gè)用於顯示正面內(nèi)容，一個(gè)用於顯示背面內(nèi)容，具體範(fàn)例程式碼如下：<!--index.wxml-->&l
支付寶上線「漢字拾光-生僻字」小程序，用於徵集、補(bǔ)充生僻字庫
Oct 31, 2023 pm 09:25 PM
本站10月31日消息，今年5月27日，螞蟻集團(tuán)宣布啟動(dòng)“漢字拾光計(jì)劃”，最近又迎來新進(jìn)展：支付寶上線“漢字拾光-生僻字”小程序，用於向社會(huì)徵集生僻字，補(bǔ)充生僻字庫，同時(shí)提供不同的生僻字輸入體驗(yàn)，以幫助完善支付寶內(nèi)的生僻字輸入方法。目前，用戶搜尋「漢字拾光」、「生僻字」等關(guān)鍵字就可以進(jìn)入「生僻字」小程式。在小程式裡，使用者可以提交尚未被系統(tǒng)辨識(shí)輸入的生僻字圖片，支付寶工程師確認(rèn)後，將會(huì)對(duì)字庫進(jìn)行補(bǔ)錄入。本站注意到，使用者也可以在小程式體驗(yàn)最新的拆字輸入法，這項(xiàng)輸入法針對(duì)讀音不明確的生僻字設(shè)計(jì)。用戶拆
小程式能用react嗎
Dec 29, 2022 am 11:06 AM
小程式能用react，其使用方法：1、基於「react-reconciler」實(shí)作一個(gè)渲染器，產(chǎn)生一個(gè)DSL；2、建立一個(gè)小程式元件，去解析和渲染DSL；3、安裝npm，並執(zhí)行開發(fā)者工具中的建構(gòu)npm；4、在自己的頁面中引入包，再利用api即可完成開發(fā)。
uniapp如何實(shí)現(xiàn)小程式和H5的快速轉(zhuǎn)換
Oct 20, 2023 pm 02:12 PM
uniapp如何實(shí)現(xiàn)小程式和H5的快速轉(zhuǎn)換，需要具體程式碼範(fàn)例近年來，隨著行動(dòng)網(wǎng)路的發(fā)展和智慧型手機(jī)的普及，小程式和H5成為了不可或缺的應(yīng)用形式。而uniapp作為一個(gè)跨平臺(tái)的開發(fā)框架，可以在一套程式碼的基礎(chǔ)上，快速實(shí)現(xiàn)小程式和H5的轉(zhuǎn)換，大大提高了開發(fā)效率。本文將介紹uniapp如何實(shí)現(xiàn)小程式和H5的快速轉(zhuǎn)換，並給出具體的程式碼範(fàn)例。一、uniapp簡(jiǎn)介unia
教你如何在小程式中用公眾號(hào)範(fàn)本訊息（附詳細(xì)想法）
Nov 04, 2022 pm 04:53 PM
這篇文章給大家?guī)砹岁P(guān)於微信小程式的相關(guān)問題，其中主要介紹瞭如何在小程式中用公眾號(hào)範(fàn)本訊息，下面一起來看一下，希望對(duì)大家有幫助。
用Python編寫簡(jiǎn)單的聊天程式教程
May 08, 2023 pm 06:37 PM
實(shí)現(xiàn)思路x01服務(wù)端的建立首先,在服務(wù)端,使用socket進(jìn)行訊息的接受,每接受一個(gè)socket的請(qǐng)求,就開啟一個(gè)新的線程來管理訊息的分發(fā)與接受,同時(shí),又存在一個(gè)handler來管理所有的線程,從而實(shí)現(xiàn)對(duì)聊天室的各種功能的處理x02客戶端的建立客戶端的建立就要比服務(wù)端簡(jiǎn)單多了,客戶端的作用只是對(duì)消息的發(fā)送以及接受,以及按照特定的規(guī)則去輸入特定的字符從而實(shí)現(xiàn)不同的功能的使用,因此,在客戶端這裡,只需要去使用兩個(gè)線程,一個(gè)是專門用於接受消息,一個(gè)是專門用於發(fā)送消息的至於為什麼不用一個(gè)呢,那是因?yàn)?只
