从 wav 转换为 mp3 后上传音频 blob

Posted 2023-05-09

【中文标题】从 wav 转换为 mp3 后上传音频 blob

【英文标题】：Upload audio blob after conversion from wav to mp3

【发布时间】：2020-10-22 13:41:25

【问题描述】：

function init() 
    var cfg = ;
    audio = new Recorder(cfg);


function toggle( btn ) // audio && audio.record();

    if(audio instanceof Recorder)


        var btnLabel = btn.firstChild.nodeValue;

        if( btnLabel === 'Record' )
            audio.record();
        else
           audio.stop();
           createPreview( 'recordings' );
           audio.clear();
        

        btn.firstChild.nodeValue = (btnLabel === 'Record') ? 'Stop' : 'Record';
        btn.setAttribute('class', (btn.getAttribute('class') === 'btn btn-primary') ? 'btn btn-danger' : 'btn btn-primary');

     else 
        init();
        toggle( btn );
    



function createPreview( containerId ) 
    // audio && audio.exportWAV( function(blob) 

    var targetContainer = document.getElementById( containerId );
    var timestamp = new Date().getTime();
    var filename = 'recording_'+ timestamp;
    var div = document.createElement('div');

    var linkMP3 = document.createElement('a');
        linkMP3.setAttribute('id', 'MP3-'+ timestamp);

    var iconMP3 = document.createElement('img');
        iconMP3.setAttribute('src', 'images/i-mp3.jpeg');
    
    var linkWAV = document.createElement('a');
        linkWAV.setAttribute('id', 'WAV-'+ timestamp);

    var iconWAV = document.createElement('img');
        iconWAV.setAttribute('src', 'images/i-wav.jpeg');

    var player = document.createElement('audio');
        player.setAttribute('id', 'PLAYER-'+ timestamp);
        player.controls = true;
    
    div.appendChild(player);
    div.appendChild(linkWAV);
    div.appendChild(linkMP3);
    targetContainer.appendChild(div);
    
    audio.export( function( mediaObj ) 

        if( mediaObj.blob.type == 'audio/mp3' )

            var url = mediaObj.url;
            targetLink = document.getElementById( 'MP3-'+ timestamp );
            
            targetLink.href = url;
            targetLink.download = filename +'.mp3';
            targetLink.innerhtml = targetLink.download;

            saveAudio( url, filename );
          
         else  // 'audio/wav'

            var url = URL.createObjectURL( mediaObj.blob );
            targetPlayer = document.getElementById( 'PLAYER-'+ timestamp );
            targetLink = document.getElementById( 'WAV-'+ timestamp );
            
            targetPlayer.src = url;
            targetLink.href = url;
            targetLink.download = filename +'.wav';
            targetLink.innerHTML = targetLink.download;

        
    );


function saveAudio( url, filename )

    var firebaseUrl = 'your_firebase_url';

    if(firebaseUrl !== 'your_firebase_url')
        
        console.info('>> saving audio: url');
        console.log( url );

        ref = new Firebase( firebaseUrl );
        ref.set(
            filetype: 'audio/mp3',
            base64Str: url,
            filename: filename +'.mp3'
        );
    
    else

        console.warn('Audio not saved to firebase because firebaseUrl is undefined.');

    

我需要在浏览器中录制音频（短片、语音、单声道）并以 mp3 格式上传。 This by Chris Geirman 几乎拥有我需要的一切，除了我不使用 firebase，我想使用 jquery 将音频 blob 上传到我服务器上的文件夹。我对这一切都很陌生，但我猜我需要用我自己的 uploadAudio() jquery(?) 函数替换 saveAudio() 函数（类似于this），它将链接到脚本在 /upload.php 中。到目前为止一切顺利（？），但我无法从 Chris 的脚本中弄清楚我应该上传/传递到 /upload.php 的确切内容。我打算实现脚本here。

【参考方案1】：

好的，以防万一它可以帮助我使用this from Soumen Basak设法让它工作的任何人。

function uploadAudio( blob ) 
  var reader = new FileReader();
  reader.onload = function(event)
    var fd = ;
    fd["fname"] = "test.wav";
    fd["data"] = event.target.result;
    $.ajax(
      type: 'POST',
      url: 'upload.php',
      data: fd,
      dataType: 'text'
    ).done(function(data) 
        console.log(data);
    );
  ;
  reader.readAsDataURL(blob);

用任何适用的替换test.wav - 在我的例子中是BlahBlah.mp3。然后要引用 Chris Geirman 脚本中的 blob，请将 uploadAudio( blob ); 更改为 uploadAudio( mediaObj.blob );。

请注意，在 localhost 上进行此设置后，2 分钟的音频需要 1'40" 才能从 wav 转换为 mp3 并移至上传目录。下一项工作，创建进度条等！

上传.php（再次感谢Soumen Basak）：

<?
// pull the raw binary data from the POST array
$data = substr($_POST['data'], strpos($_POST['data'], ",") + 1);
// decode it
$decodedData = base64_decode($data);
// print out the raw data,
$filename = $_POST['fname'];
echo $filename;
// write the data out to the file
$fp = fopen($filename, 'wb');
fwrite($fp, $decodedData);
fclose($fp);
?>