WeChat 애플릿 개발 레코더, 오디오 재생, 애니메이션-미니 프로그램 개발-php.cn

집

위챗 애플릿

미니 프로그램 개발

WeChat 애플릿 개발 레코더, 오디오 재생, 애니메이션

小云云

Mar 17, 2018 pm 01:14 PM

미니 프로그램 기록계 프로그램 개발

이 기사는 주로 녹음기, 오디오 재생 및 애니메이션의 WeChat 애플릿 개발을 공유합니다.

1. 들어와서 선명하게 보시려면 처음에는 오디오 목록이 로드되지 않습니다.

2. , 중간에 마이크가 나타납니다.

실제로는 js를 사용하여 사진 표시 및 숨기기를 제어합니다. 여기서 말할 가치가 있는 것은 녹음입니다. 녹음 API의 경우 녹음 시간이 너무 짧으면 녹음이 실패하므로 녹음 시간 제한은 WeChat 음성과 동일합니다.

3. 녹음이 완료된 후에만 목록을 로드합니다.
아래 사진은 위챗에 저장된 파일에서 얻은 목록 정보입니다.

여기 있는 파일은 단순한 오디오가 아닐 수도 있습니다. 다음 경로는 모두 wx:file//store_...

Tencent/에서도 찾아볼 수 있습니다. micromsg/wxafiles/wx..../ 디렉터리입니다.

시간은 포맷 후의 파일 크기입니다. B이며, 다음과 같이 KB로 변환됩니다.

모바일 디렉터리는 다음과 같습니다. 하지만 현재 원인을 알 수 없습니다.

파일 이름은 다음과 같습니다.
1.tempFilePath: 임시 파일 녹음 후 두 번째로 애플릿에 진입한 후에는 정상적으로 사용할 수 없습니다.

2.savedFilePath: 영구 파일 경로는 WeChat이 100M의 저장 공간만 제공한다는 점에 유의할 필요가 있습니다.

목소리를 들으시려면 해당 항목을 클릭하세요.

코드 업로드:

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">存储路径:{{item.filePath}}</view>  
		                <view  class="date" >存储时间:{{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  
//获取应用实例  
var app = getApp()  
Page({  
  data: {  
    j: 1,//帧动画初始图片  
    isSpeaking: false,//是否正在说话  
    voices: [],//音频数组  
  },  
  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) {  
        //临时路径,下次进入小程序时无法正常使用  
        var tempFilePath = res.tempFilePath  
        console.log("tempFilePath: " + tempFilePath)  
        //持久保存  
        wx.saveFile({  
          tempFilePath: tempFilePath,  
          success: function (res) {  
            //持久路径  
            //本地文件存储的大小限制为 100M  
            var savedFilePath = res.savedFilePath  
            console.log("savedFilePath: " + savedFilePath)  
          }  
        })  
        wx.showToast({  
          title: &#39;恭喜!录音成功&#39;,  
          icon: &#39;success&#39;,  
          duration: 1000  
        })  
        //获取录音音频列表  
        wx.getSavedFileList({  
          success: function (res) {  
            var voices = [];  
            for (var i = 0; i < res.fileList.length; i++) {  
              //格式化时间  
              var createTime = new Date(res.fileList[i].createTime)  
              //将音频大小B转为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("文件时间: " + createTime)  
              console.log("文件大小: " + size)  
              voices = voices.concat(voice);  
            }  
            _this.setData({  
              voices: voices  
            })  
          }  
        })  
      },  
      fail: function (res) {  
        //录音失败  
        wx.showModal({  
          title: &#39;提示&#39;,  
          content: &#39;录音的姿势不对!&#39;,  
          showCancel: false,  
          success: function (res) {  
            if (res.confirm) {  
              console.log(&#39;用户点击确定&#39;)  
              return  
            }  
          }  
        })  
      }  
    })  
  },  
  //手指抬起  
  touchup: function () {  
    console.log("手指抬起了...")  
    this.setData({  
      isSpeaking: false,  
    })  
    clearInterval(this.timer)  
    wx.stopRecord()  
  },  
  //点击播放录音  
  gotoPlay: function (e) {  
    var filePath = e.currentTarget.dataset.key;  
    //点击开始播放  
    wx.showToast({  
      title: &#39;开始播放&#39;,  
      icon: &#39;success&#39;,  
      duration: 1000  
    })  
    wx.playVoice({  
      filePath: filePath,  
      success: function () {  
        wx.showToast({  
          title: &#39;播放结束&#39;,  
          icon: &#39;success&#39;,  
          duration: 1000  
        })  
      }  
    })  
  }  
})  
//麦克风帧动画  
function speaking() {  
  var _this = this;  
  //话筒帧动画  
  var i = 1;  
  this.timer = setInterval(function () {  
    i++;  
    i = i % 5;  
    _this.setData({  
      j: i  
    })  
  }, 200);  
}

로그인 후 복사

참고:

1. 녹음된 오디오는 기본적으로 로컬 임시 경로에 저장됩니다. 미니 프로그램은 두 번째 입력 시 정상적으로 사용할 수 없습니다. 하지만 로컬 파일 크기는 100M 제한이 있으니 백그라운드에 업로드하는 것이 가장 좋습니다

2.录音的时间不能太短.否则会失败;也不能超过60秒.到了60秒会自动停止录音.

3.音频播放不能同时播放多个音频.看文档.微信小程序播放音频文档

1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可.

2.按住录音按钮的时候会出现麦克风.中间的麦克风是个帧动画.

其实就是用js控制图片显示隐藏.没啥好说的.这里值得说一说的是录音.微信的录音API后,如果录音时间太短,会录音失败.所以fail的时候还是需要处理一下.录音时间的限制和微信语音是一样的.60秒.

3.我在录音完成后才加载列表.

下图就是从微信存储的文件里获取到的列表信息.有储存路径,创建时间,文件大小.

这里的文件可能不只是音频.这里我没做判断.下面的路径都是wx:file//store_...

我也去找了下.在Tencent/micromsg/wxafiles/wx..../这一级目录就能找到了.

时间是格式化之后的.文件大小是B,转成KB如下.

手机目录如下.但是打开之后播放不了.目前原因不明.

下面是文件全名称.

1.tempFilePath : 录音之后的临时文件.第二次进入小程序就不能正常使用了.

2.savedFilePath :持久保存的文件路径.值得注意的是微信只给100M的储存空间.还是尽早上传到后台吧.

4.播放录音音频.

点击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">存储路径:{{item.filePath}}</view>  
		                <view  class="date" >存储时间:{{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  
//获取应用实例  
var app = getApp()  
Page({  
  data: {  
    j: 1,//帧动画初始图片  
    isSpeaking: false,//是否正在说话  
    voices: [],//音频数组  
  },  
  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) {  
        //临时路径,下次进入小程序时无法正常使用  
        var tempFilePath = res.tempFilePath  
        console.log("tempFilePath: " + tempFilePath)  
        //持久保存  
        wx.saveFile({  
          tempFilePath: tempFilePath,  
          success: function (res) {  
            //持久路径  
            //本地文件存储的大小限制为 100M  
            var savedFilePath = res.savedFilePath  
            console.log("savedFilePath: " + savedFilePath)  
          }  
        })  
        wx.showToast({  
          title: &#39;恭喜!录音成功&#39;,  
          icon: &#39;success&#39;,  
          duration: 1000  
        })  
        //获取录音音频列表  
        wx.getSavedFileList({  
          success: function (res) {  
            var voices = [];  
            for (var i = 0; i < res.fileList.length; i++) {  
              //格式化时间  
              var createTime = new Date(res.fileList[i].createTime)  
              //将音频大小B转为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("文件时间: " + createTime)  
              console.log("文件大小: " + size)  
              voices = voices.concat(voice);  
            }  
            _this.setData({  
              voices: voices  
            })  
          }  
        })  
      },  
      fail: function (res) {  
        //录音失败  
        wx.showModal({  
          title: &#39;提示&#39;,  
          content: &#39;录音的姿势不对!&#39;,  
          showCancel: false,  
          success: function (res) {  
            if (res.confirm) {  
              console.log(&#39;用户点击确定&#39;)  
              return  
            }  
          }  
        })  
      }  
    })  
  },  
  //手指抬起  
  touchup: function () {  
    console.log("手指抬起了...")  
    this.setData({  
      isSpeaking: false,  
    })  
    clearInterval(this.timer)  
    wx.stopRecord()  
  },  
  //点击播放录音  
  gotoPlay: function (e) {  
    var filePath = e.currentTarget.dataset.key;  
    //点击开始播放  
    wx.showToast({  
      title: &#39;开始播放&#39;,  
      icon: &#39;success&#39;,  
      duration: 1000  
    })  
    wx.playVoice({  
      filePath: filePath,  
      success: function () {  
        wx.showToast({  
          title: &#39;播放结束&#39;,  
          icon: &#39;success&#39;,  
          duration: 1000  
        })  
      }  
    })  
  }  
})  
//麦克风帧动画  
function speaking() {  
  var _this = this;  
  //话筒帧动画  
  var i = 1;  
  this.timer = setInterval(function () {  
    i++;  
    i = i % 5;  
    _this.setData({  
      j: i  
    })  
  }, 200);  
}

로그인 후 복사

注意:

1. 녹음된 오디오는 기본적으로 로컬 임시 경로에 저장되며, 두 번째 애플릿 진입 시에는 정상적으로 사용할 수 없습니다. 단, 로컬 파일 크기 제한은 100M로 제한하는 것이 가장 좋습니다.

2. 녹음 시간이 너무 짧으면 안 됩니다. 60초를 초과하면 녹음이 자동으로 중지됩니다.

3. 문서를 참조하세요. WeChat 애플릿은 오디오 문서를 재생합니다.

WeChat 애플릿 시뮬레이션 드롭다운 메뉴 개발 예

WeChat 애플릿 개발 팝업 상자 구현 방법

WeChat 애플릿은 녹음 후 파일을 업로드하는 상세한 방법을 구현합니다

위 내용은 WeChat 애플릿 개발 레코더, 오디오 재생, 애니메이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

자바 튜토리얼

1675

Cakephp 튜토리얼

1429

라라벨 튜토리얼

1333

PHP 튜토리얼

1278

C# 튜토리얼

1257

Related knowledge

Ubuntu Linux 배포판에서 스트리밍 오디오를 녹음하는 방법 Feb 25, 2024 pm 03:46 PM

Ubuntu 및 기타 Linux 배포판에서 오디오를 녹음하는 방법은 무엇입니까? 컴퓨터 마이크를 통해 음성 해설을 녹음하려면 GNOME Voice Recorder 또는 Audacity를 사용할 수 있습니다. GNOME Recorder를 사용하는 것은 간단하고 이해하기 쉽지만 기능이 상대적으로 제한되어 있습니다. Audacity의 경우 처음 접할 때 조금 어렵게 느껴질 수도 있지만 고급 녹음 기능이 많이 있습니다. 그러나 이 튜토리얼에서는 이에 대해 자세히 다루지 않습니다. 그놈 음성 녹음기는 마이크와 함께 사용할 수 있습니다. 또한 마이크 입력을 사용할 뿐만 아니라 스트리밍 음악도 녹음하는 보이스 레코더(Voice Recorder)라는 도구가 있습니다. 이 튜토리얼에서는 AudioR을 사용하여 그놈 음성 녹음기로 사운드를 녹음하는 방법에 대한 다음 단계를 보여줍니다.

Python을 사용하여 WeChat 애플릿 개발 Jun 17, 2023 pm 06:34 PM

모바일 인터넷 기술과 스마트폰의 대중화로 인해 WeChat은 사람들의 삶에 없어서는 안될 애플리케이션이 되었습니다. WeChat 미니 프로그램을 사용하면 사람들은 애플리케이션을 다운로드하고 설치하지 않고도 미니 프로그램을 직접 사용하여 몇 가지 간단한 요구 사항을 해결할 수 있습니다. 이 기사에서는 Python을 사용하여 WeChat 애플릿을 개발하는 방법을 소개합니다. 1. 준비 Python을 사용하여 WeChat 애플릿을 개발하기 전에 관련 Python 라이브러리를 설치해야 합니다. 여기서는 wxpy와 itchat 두 라이브러리를 사용하는 것이 좋습니다. wxpy는 위챗 머신입니다

WeChat 미니 프로그램에서 카드 뒤집기 효과 구현 Nov 21, 2023 am 10:55 AM

WeChat 미니 프로그램에서 카드 뒤집기 효과 구현 WeChat 미니 프로그램에서 카드 뒤집기 효과를 구현하는 것은 사용자 경험과 인터페이스 상호 작용의 매력을 향상시킬 수 있는 일반적인 애니메이션 효과입니다. 다음은 WeChat 애플릿에서 카드 뒤집기 효과를 구현하는 방법을 자세히 소개하고 관련 코드 예제를 제공합니다. 먼저, 미니 프로그램의 페이지 레이아웃 파일에 두 개의 카드 요소를 정의해야 합니다. 하나는 앞면 내용을 표시하기 위한 것이고 다른 하나는 뒷면 내용을 표시하기 위한 것입니다. <--index.wxml- ->&l

Alipay, 희귀 문자 라이브러리를 수집하고 보완하는 '한자 따기-희귀 문자' 미니 프로그램 출시 Oct 31, 2023 pm 09:25 PM

10월 31일 이 사이트의 소식에 따르면 올해 5월 27일 Ant Group은 '한자 선택 프로젝트'를 시작한다고 발표했으며 최근 새로운 진전을 보였습니다. Alipay는 '한자 선택 - 흔하지 않은 문자' 미니 프로그램을 출시했습니다. 희귀 캐릭터는 희귀 캐릭터 라이브러리를 보완하고 희귀 캐릭터에 대한 다양한 입력 경험을 제공하여 Alipay의 희귀 캐릭터 입력 방법을 개선하는 데 도움을 줍니다. 현재 사용자는 "한자픽업", "희귀문자" 등의 키워드를 검색하여 "특수문자" 애플릿에 진입할 수 있습니다. 미니 프로그램에서 사용자는 시스템에서 인식 및 입력되지 않은 희귀 문자의 사진을 제출할 수 있으며 확인 후 Alipay 엔지니어가 글꼴 라이브러리에 추가 항목을 작성합니다. 이 웹사이트에서는 미니 프로그램에서도 최신 문자 분할 입력 방식을 경험할 수 있다고 밝혔습니다. 이 입력 방식은 발음이 불분명한 희귀 문자를 위해 설계되었습니다. 사용자 해체

작은 프로그램이 반응할 수 있나요? Dec 29, 2022 am 11:06 AM

미니 프로그램은 반응을 사용할 수 있습니다. 사용 방법: 1. "react-reconciler"를 기반으로 렌더러를 구현하고 DSL을 생성합니다. 2. DSL을 구문 분석하고 렌더링하기 위한 미니 프로그램 구성 요소를 만듭니다. 3. npm을 설치하고 개발자를 실행합니다. 도구에서 npm을 빌드합니다. 4. 자신의 페이지에 패키지를 소개한 다음 API를 사용하여 개발을 완료합니다.

uniapp이 미니 프로그램과 H5 간의 빠른 전환을 달성하는 방법 Oct 20, 2023 pm 02:12 PM

유니앱이 미니 프로그램과 H5 사이를 빠르게 전환하려면 구체적인 코드 예제가 필요합니다. 최근 모바일 인터넷의 발전과 스마트폰의 대중화로 인해 미니 프로그램과 H5는 필수 애플리케이션 형태가 되었습니다. 크로스 플랫폼 개발 프레임워크인 uniapp은 코드 세트를 기반으로 작은 프로그램과 H5 간의 변환을 신속하게 실현하여 개발 효율성을 크게 향상시킬 수 있습니다. 이 기사에서는 uniapp이 미니 프로그램과 H5 간의 신속한 변환을 달성하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. 유니앱 유니아 소개

Python으로 간단한 채팅 프로그램 작성 튜토리얼 May 08, 2023 pm 06:37 PM

구현 아이디어 x01 서버 구축 먼저, 서버 측에서는 소켓을 사용하여 메시지를 수락합니다. 소켓 요청이 수락될 때마다 새 스레드가 열려 메시지 배포 및 수락을 관리합니다. 모든 스레드를 관리하여 채팅방의 다양한 기능 처리를 실현합니다. x02 클라이언트의 설정은 서버보다 훨씬 간단합니다. 클라이언트의 기능은 메시지를 보내고 받는 것뿐이며 특정 문자를 입력하는 것뿐입니다. 따라서 다양한 기능을 사용하려면 클라이언트 측에서 두 개의 스레드만 사용해야 합니다. 하나는 메시지 수신 전용이고 다른 하나는 메시지 전송 전용입니다. 왜냐하면, 오직