HTML5 Web ページの記録とサーバーへのアップロードは、PC、Android、IOS の WeChat 機能をサポートします

Web ベースのチャット インターフェイスを作成する準備をするときは、絵文字、写真、アップロードされたファイルが必要です。ビデオは不要ですが、音声は依然として必要です。

この記事では、Web ページ上の GitHub の Recorder を使用してオンライン録画を記録し、サーバーにアップロードします。

このサンプル コードは、PC、Android、および IOS (Safari のみ) での使用をサポートしています。RecordApp を使用する場合は、IOS (WeChat ブラウザー、アプレット) のサポートを追加できます。

コードを何千回も読むよりも、一度実行するほうがよいでしょう。 新しい HTML ファイルを作成し、次の 3 つのコードをファイルにコピーし、ブラウザをダブルクリックしてテストのために開きます。

 <!-- まず、js 記録ライブラリをロードします。 注: 使用するには、js をローカルにクローンする必要があります --><meta charset=utf-8 /><script src=https://xiangyuecn.github.io/Recorder/recorder。 mp3.min.js></script><input type=button onclick=startRec() value=録音開始><hr><input type=button onclick=playRec() value=終了して再生><input type=button onclick=uploadRec() value=終了してアップロード><script>var rec;function startRec(){ rec=Recorder();//デフォルト設定を使用、mp3 形式//開く関連リソースを取得するためのマイクの承認rec.open(function(){ //録音開始rec.start(); },function(msg,isUserNotAllow){ //ユーザーが権限を拒否したか、ブラウザがalert((isUserNotAllow? ユーザーが権限を拒否しました。:)+記録できません:+msg);}; </script>

 <script>function UploadRec(){ //記録を停止し、記録ファイルの BLOB バイナリ オブジェクトを取得します。好きなことを実行できます。rec.stop(function(blob,duration){ /* BLOB ファイル オブジェクト。これは次のコマンドで読み出すことができます。 FileReader Content、または FormData を使用してアップロードします。この例では、バイナリ ファイルが直接アップロードされます。通常の application/x-www-form-urlencoded フォームのアップロードについては、github*/ var form=new FormData(); の例を参照してください。 form.append(upfile,blob,recorder.mp3); //通常のフォーム form と何ら変わりはありません。バックエンドは、upfile パラメータを持つファイルを受け取ります。ファイル名は、recorder.mp3 です。 //ajax を使用して直接アップロードします。 xhr=新しいXMLHttpRequest(); xhr.open(POST, http://baidu.com/, アップロード アドレスに変更します);//この偽のアドレスはコンソール ネットワークでリクエストのデータと形式を確認できます。リクエストの結果は無関係です xhr.onreadystatechange=function ( ){ if(xhr.readyState==4){alert(xhr.status==200?アップロード成功: テストするには、まずブラウザ コンソールを開いてから、再度記録してください。ネットワーク タブで、アップロードを確認できます。データを要求し、フォーマット済み) } } xhr.send(form) },function(msg){ アラート(記録に失敗しました:+msg); </script>

 <script>function playRec(){ //録音を停止し、録音ファイル BLOB バイナリ オブジェクトを取得し、必要なことをすべて実行します rec.stop(function(blob,duration){ v​​ar audio=document.createElement(audio); audio.controls= true; document.body.appendChild(audio); // BLOB オーディオ URL を取得するのは非常に簡単です audio.src=URL.createObjectURL(blob); },function(msg){alert(録画失敗:+msg) });};</script>

-------------------------------------------------- ----------------------------------

GitHub アドレス: https://github.com/xiangyuecn/Recorder

オンラインテスト: ここをクリックしてテストしてください

Recorder は、HTML5 の記録に使用され、Tencent Android X5 カーネル (QQ、WeChat) を含む、getUserMedia を実装したほとんどのモバイルおよび PC ブラウザをサポートする純粋な JS ライブラリです。

録音出力はデフォルトで mp3 形式ですが、wav 形式はオプションです (この形式の録音ファイルは非常に大きいです)。ogg、webm、および amr 形式のサポートは限定されています (対応するエンコーダーがある場合)。 ）。

コンパクト: 録音ファイルのサイズに特別な要件がない場合は、録音コア + wav エンコーダーを使用するだけで済みます。ソース コードは 300 行未満、圧縮された Recorder.wav.min.js は 4kb 未満です。 。 MP3 は、lamejs を使用してエンコードされており、gzip をオンにすると、圧縮された Recorder.mp3.min.js は 54kb になります。

iOS では Safari のみが getUserMedia (11. ブラウザ、ミニ プログラム Web ビュー) をサポートしているため、RecordApp はハイブリッド アプリのサポートも強化しています。

RecordApp では JsSDK 録画サポートを提供するために WeChat パブリック (サブスクリプション) アカウントが必要なため、開発はより困難になりますが、より多くの環境をサポートします。レコーダーは箱から出してすぐに使用できます。どのレコーダーを使用するかについては、以下の表を参照してください。

* RecordAppソース コードは、github のディレクトリxiangyuecn/Recorder/app-support-sampleで確認できます。

上記は、編集者によって紹介された HTML5 Web ページのサーバーへのアップロードです。PC、Android、および IOS の WeChat 機能をサポートしています。ご質問があれば、メッセージを残してください。編集者が時間内に返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！

この記事が役立つと思われる場合は、転載していただいてかまいませんので、出典を明記してください。ありがとうございます。