BinaryDevelop
  1. ホーム

recordMP3 は、Web 録音、アップロード、再生機能を実装しています。

2022-02-24 08:35:32

<スパン http://blog.csdn.net/sweetsuzyhyf/article/details/50469881 より取得



<スパン パッケージのダウンロードはこちら： http://download.csdn NET /詳細/sweetsuzyhyf/9393053

ソースコードはすべてここにあります。

[html】をご覧ください。］ 表示プレーン コピー
印刷 ?
  1. <スパン <!DOCTYPE html >
  2. < html >
  3. < ヘッド >
  4. < メタ http-equiv = "Content-Type"。 内容 = "text/html; charset=utf-8"。 />
  5. < タイトル > Html5のWeb JavaScriptの録音MP3オーディオ </ タイトル >
  6. < メタ 文字セット = "utf-8"。 />
  7. <スパン </ ヘッド >
  8. < 本体 >
  9. < h1 > Html5のWeb JavaScriptの録音MP3オーディオ </ h1 >
  10. < ボタン オンクリック = <スパン "funStart(this);" イド = btnStart"  無効 > レコーディング </ ボタン >
  11. < ボタン オンクリック = <スパン "funStop(this);" イド = btnStop"。  使用不可 > 停止 <スパン </ ボタン >
  12. < ボタン オンクリック = <スパン "funUpload(this);" イド = "btnUpload"。  使用不可 > アップロード <スパン </ ボタン >
  13. < h4 > デバッグ情報です。 </ h4 >
  14. < ディブ イド = 録画リスト"録画リスト" > <スパン </ ディブ >
  15. < スクリプト src <スパン = "js/recordmp3.js"。 > </ スクリプト >
  16. < スクリプト >
  17.         ヴァル  レコーダー <スパン  =  <スパン 新しい  MP3Recorder({.  
  18.             debug:trueを指定します。  
  19.             funOk: function () {  
  20. btnStart.disabled  =  虚偽 ;  
  21.                 log('初期化成功');  
  22.             },  
  23.             funCancel: 関数 (msg) {...  
  24.                 log(msg)を実行します。  
  25. レコーダー <スパン  =  ヌル ;  
  26.             }  
  27.         });  
  28.         var mp3Blob;  
  30. <スパン
  31.         関数funStart(button) {  
  32. btnStart.disabled  =  真 ;  
  33. btnStop.disabled  =  虚偽 ;  
  34. btnUpload.disabled。  =  真 ;  
  35.             log('録画が始まりました...') ;  
  36.             recorder.start()を実行します。  
  37.         }  
  39. <スパン         function funStop(button) {  
  40.             recorder.stop()を実行します。  
  41. btnStart.disabled  =  虚偽 ;  
  42. btnStop.disabled  =  <スパン 真 ;  
  43. btnUpload.disabled。  =  虚偽 ;  
  44.             log('End of recording, MP3 export in progress...') ;  
  45.             レコーダー.getMp3Blob(関数 (blob) {)  
  46.                 log('MP3エクスポート成功');  
  48. <スパン mp3Blob <スパン  =  ブロブ ;  
  49.                 ヴァル  url  =  <スパン URL .createObjectURL(mp3Blob);  
  50.                 ヴァル  ディブ  =  ドキュメント .createElement('div');  
  51.                 ヴァル  オー  =  ドキュメント .createElement('audio');  
  52.                 ヴァル  hf <スパン  =  ドキュメント .createElement('a');  
  54. <スパン au.コントロールズ  =  <スパン 真 ;  
  55. au.src  =  <スパン url ;  
  56. hf.href  =  <スパン url ;  
  57. hf.ダウンロード <スパン  =  <スパン 新しい  Date().toISOString() + '.mp3';  
  58. hf.innerHTML  =  hf <スパン .ダウンロード  
  59.                 div.appendChild(au)。  
  60.                 div.appendChild(hf)。  
  61.                 recordingslist.appendChild(div)。  
  62.             });  
  63.         }  
  65.         関数log(str) {  
  66.             recordingslist.innerHTML += str + '. < ブリュ /> ';  
  67.         }  
  69.         function funUpload() {  
  70.             VAR  fd  =  <スパン 新しい  FormData()です。  
  71.             ヴァル  mp3名  =  encodeURIComponent ('audio_recording_' + new Date().getTime() + '.mp3') となります。  
  72.             fd.append('mp3Name',mp3Name)を実行します。  
  73.             fd.append('file', mp3Blob);  
  75.             ヴァル  xhr  =  <スパン 新しい  XMLHttpRequest()を使用します。  
  76. xhr.onreadystatechange  =  <スパン 機能 <スパン  () {  
  77. <スパン                 もし xhr.readyState  == 4 &&  xhr.status  == 200) {  
  78.                     recordingslist.innerHTML += 'アップロードに成功しました。 < a ホールド = "' + xhr.responseText + '" ターゲット = "_blank"。 > <スパン ' + mp3Name + ' <スパン </ a > ';  
  79.                 }  
  80.             };  
  82.             xhr.open('POST', 'upload.ashx')。  
  83.             xhr.send(fd)を実行します。  
  84.         }  
  85. </ スクリプト >
  86. <スパン </ 本体 >
  87. <スパン </ html >

[javascript] を使用します。 表示プレーン

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します