WeChat アプレット開発レコーダー、オーディオ再生、アニメーション-ミニプログラム開発-php.cn

ホームページ

WeChat アプレット

ミニプログラム開発

WeChat アプレット開発レコーダー、オーディオ再生、アニメーション

小云云

Mar 17, 2018 pm 01:14 PM

アプレットレコーダープログラム開発

この記事では、主にレコーダー、オーディオ再生、アニメーションの WeChat アプレット開発について説明します。お役に立てれば幸いです。

1. 音声リストは最初はロードされていません

2.真ん中にマイクが表示されます。

は実際に画像の表示と非表示を制御するために使用されます。ここで言うべきことは何もありません。録音APIでは、録音時間が短すぎると録音に失敗するため、録音時間の制限はWeChat音声と同じ60秒です。

3. 録音が完了したらリストをロードするだけです

下の写真はWeChatに保存されているファイルから取得したリスト情報です
。ここでのファイルはオーディオだけではない可能性があります。次のパスはすべて wx:file//store_...

Tencent/micromsg にもあります。 /wxafiles/wx..../ディレクトリ。

時間はフォーマット後のファイルサイズで、KBに換算するとBです。

モバイルディレクトリは以下の通りです。

以下はファイルのフルネームです

1.tempFilePath:後の一時ファイル2 回目にアプレットに入った後は、通常は使用できません。

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. 録音された音声はデフォルトではローカルの一時パスに保存されますが、2 回目に入力すると永続的に保存できます。ローカルファイルのサイズ制限は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 アプレット開発レコーダー、オーディオ再生、アニメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1674

CakePHP チュートリアル

1429

Laravel チュートリアル

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については、最初は少し難しく感じるかもしれませんが、高度な録音機能が豊富にあります。ただし、このチュートリアルではこれについては詳しく説明しません。 GNOME ボイスレコーダーはマイクを使用して使用できます。さらに、マイク入力を使用するだけでなく、ストリーミング音楽を録音するボイスレコーダーと呼ばれるツールもあります。このチュートリアルでは、AudioR を使用して GNOME Voice Recorder でサウンドを録音する方法について次の手順を説明します。

Python を使用して WeChat アプレットを開発する Jun 17, 2023 pm 06:34 PM

モバイルインターネット技術とスマートフォンの普及により、WeChat は人々の生活に欠かせないアプリケーションになりました。 WeChat ミニプログラムを使用すると、アプリケーションをダウンロードしてインストールすることなく、ミニプログラムを直接使用して、いくつかの簡単なニーズを解決できます。この記事では、Python を使用して WeChat アプレットを開発する方法を紹介します。 1. 準備 Python を使用して WeChat アプレットを開発する前に、関連する Python ライブラリをインストールする必要があります。ここでは、wxpy と itchat の 2 つのライブラリを使用することをお勧めします。 wxpy は WeChat マシンです

WeChat ミニプログラムにカードめくり効果を実装する Nov 21, 2023 am 10:55 AM

WeChat ミニプログラムでのカードめくり効果の実装 WeChat ミニプログラムでは、カードめくり効果の実装は、ユーザーエクスペリエンスとインターフェイスインタラクションの魅力を向上させることができる一般的なアニメーション効果です。以下では、WeChat アプレットでカードめくりの特殊効果を実装する方法と、関連するコード例を詳しく紹介します。まず、ミニプログラムのページレイアウトファイルに 2 つのカード要素を定義する必要があります。1 つは前面のコンテンツを表示するため、もう 1 つは背面のコンテンツを表示するためです。具体的なサンプルコードは次のとおりです: <!--index.wxml- ->&l

アリペイ、希少文字ライブラリを収集・補完する「漢字拾い-希少文字」ミニプログラムを開始 Oct 31, 2023 pm 09:25 PM

10月31日の当サイトのニュースによると、今年5月27日、アント・グループは「漢字拾いプロジェクト」の立ち上げを発表し、最近新たな進展を迎えた：アリペイが「漢字拾い-珍しい文字」ミニプログラムを開始協会からコレクションを収集するレア文字は、レア文字ライブラリを補完し、アリペイでのレア文字入力方法の改善に役立つように、レア文字に異なる入力エクスペリエンスを提供します。現在、ユーザーは「漢字ピックアップ」「珍文字」などのキーワードで検索することで「珍文字」アプレットに入ることができる。ミニプログラムでは、ユーザーがシステムで認識・入力されなかった珍しい文字の画像を送信し、確認後、Alipay のエンジニアがフォントライブラリに追加エントリを作成します。当サイトでは、発音が不明瞭な珍しい単語を対象とした最新の単語分割入力方法をミニプログラムで体験できることに注目しました。ユーザー解体

小さなプログラムでも反応できますか? Dec 29, 2022 am 11:06 AM

ミニプログラムはreactを利用することができます使い方: 1. 「react-reconciler」に基づいてレンダラーを実装し、DSLを生成します; 2. DSLを解析してレンダリングするためのミニプログラムコンポーネントを作成します; 3. npmをインストールし、開発者ビルドを実行しますツール内の npm; 4. パッケージを独自のページに導入し、API を使用して開発を完了します。

uniapp がミニプログラムと H5 の間で迅速な変換を実現する方法 Oct 20, 2023 pm 02:12 PM

uniapp がミニプログラムと H5 の間で迅速な変換を実現するには、具体的なコード例が必要ですが、近年、モバイルインターネットの発展とスマートフォンの普及に伴い、ミニプログラムと H5 は不可欠なアプリケーション形式となっています。クロスプラットフォーム開発フレームワークとして、uniapp は一連のコードに基づいて小規模プログラムと H5 間の変換を迅速に実現し、開発効率を大幅に向上させます。この記事では、uniapp がミニプログラムと H5 の間で迅速な変換を実現する方法と、具体的なコード例を紹介します。 1. uniapp uniaの紹介

Python で簡単なチャットプログラムを作成するためのチュートリアル May 08, 2023 pm 06:37 PM

実装アイデア: チャットルームのさまざまな機能を処理するために、スレッドのサーバー側を確立します。x02 クライアントの確立はサーバーよりもはるかに簡単です。クライアントの機能はメッセージの送受信と、特定の文字を特定の規則に従って入力するため、クライアント側では、メッセージ受信専用とメッセージ送信専用の 2 つのスレッドを使用するだけで、さまざまな機能を使用できます。使用しないでください。