iT邦幫忙

2023 iThome 鐵人賽

DAY 10
0
Mobile Development

Ionic結合ChatGPT - 30天打造AI英語口說導師APP系列 第 10

【Day - 10】ASP.NET Web API - 用FFmpeg打造音訊轉換服務

  • 分享至 

  • xImage
  •  

在【Day - 9】我花了很多時間嘗試解決音訊轉檔的問題。由於使用的Capacitor套件錄製的音訊格式是aac,我們需要將其轉換成Whisper API可以接受的格式。儘管我有試著在前端處理這個問題,但結果並不理想。不過,參加鐵人賽的樂趣就在於每天都會遇到新挑戰。所以今天,我打算利用ASP.NET搭配「FFmpeg」來創建一個能將aac轉換為m4a的服務。讓我們一起期待今天的成果吧!

建立ASP.NET Web API

在建立Web API專案之後,我們的第一步是先安裝FFmpeg的Nuget套件。我選擇使用的是Xabe.FFmpeg
https://ithelp.ithome.com.tw/upload/images/20230910/20161663XSFOBpqfOm.png
在【Day - 3】時,我們曾提到Ionic在WebView上有「CORS(跨來源資源共享)」的機制存在。因此,為了讓APP能夠執行我們的服務,我們必須在專案中添加相關的設定來處理這個CORS問題:

//CORS
builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(builder =>
    {
        builder.AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader();
    });
});
.
.
.
//CORS
app.UseCors();

 

添加Controller

準備兩個Model,用於接收和回傳資料:

public class AudioConvertModel
{
    public string aacBase64Data { get; set; }
}

public class AudioConvertOutPutModel
{
    public string m4aBase64Data { get; set; }
}

接下來,我們建立一個AudioConvertController,並在其中建立一個Post方法。這個方法將使用Xabe.FFmpeg工具,將aac格式的音訊轉換成m4a檔。

[Route("[controller]")]
[ApiController]
public class AudioConvertController : ControllerBase
{
    [HttpPost("aac2m4a")]
    public async Task<ActionResult<AudioConvertOutPutModel>> Post([FromBody] AudioConvertModel base64AudioObject)
    {
        //Base64字串轉換成byte陣列
        var audioBytes = Convert.FromBase64String(base64AudioObject.aacBase64Data);
        //建立一個aac暫存檔案路徑,用於保存轉換後的資料
        var aacFilePath = Path.Combine(Path.GetTempPath(), Guid.NewGuid().ToString() + ".aac");
        //建立一個m4a暫存檔案路徑,用於保存轉換後的資料
        var m4aFilePath = Path.Combine(Path.GetTempPath(), Guid.NewGuid().ToString() + ".m4a");
        //轉換後的byte陣列寫入aac
        await System.IO.File.WriteAllBytesAsync(aacFilePath, audioBytes);
        //aac檔案轉換成m4a格式
        IConversion conversion = await FFmpeg.Conversions.FromSnippet.Convert(aacFilePath, m4aFilePath);
        IConversionResult result = await conversion.Start();
        //讀取轉換後的m4a檔案並轉換成byte陣列
        var m4aFileBytes = await System.IO.File.ReadAllBytesAsync(m4aFilePath);
        //byte陣列轉換成Base64字串
        var m4aFileBase64 = Convert.ToBase64String(m4aFileBytes);
        //清除暫存檔案
        System.IO.File.Delete(aacFilePath);
        System.IO.File.Delete(m4aFilePath);
        //建立回應物件
        AudioConvertOutPutModel response = new AudioConvertOutPutModel()
        {
            m4aBase64Data = m4aFileBase64
        };
        return Ok(response);
    }
}

 

添加FFmpeg.exe

在Windows上,我們還需要準備FFmpeg.exe才能進行音訊的轉換,可到FFmpeg的官網下載。下載完成後,將檔案放置到測試路徑 bin\Debug\net6.0中。

測試API

讓我們回顧一下【Day - 9】,當時我們使用了Base64 to Audio工具來驗證,並確認了檔案的確是aac格式
https://ithelp.ithome.com.tw/upload/images/20230910/20161663Hlldx4i99P.png
我們使用Postman來測試建立好的API,並帶入aac格式的Base64字串。執行後,API順利的回傳了一組m4a格式的Base64字串。
https://ithelp.ithome.com.tw/upload/images/20230910/20161663puYfLQUmAa.png
我們將轉換出來的m4a格式的Base64字串拿到Base64 to Audio的網站進行驗證,可以確認API確實成功的將aac轉換為m4a的Base64字串囉!
https://ithelp.ithome.com.tw/upload/images/20230910/201616632dSsXjo73P.png
最後,我們把這個audio.m4a檔案下載下來,再到Postman上重新測試Whisper API,結果也順利的將音訊轉換成文字了!
https://ithelp.ithome.com.tw/upload/images/20230910/20161663g6nNjpZswe.png

結語

在經歷【Day - 9】挑戰後,我們了解到音訊格式轉換需要專業的工具來有效處理。於是,今天我們使用ASP.NET搭配FFmpeg工具成功的轉換了音訊格式。隨著問題的解決,接下來我們只需將服務架設到雲端,便可串接我們的服務,並完成語音轉文字的功能了!



Github專案程式碼:Ionic結合ChatGPT - Day10


上一篇
【Day - 9】Whisper模型 - 將語音轉成文字
下一篇
【Day - 11】Azure + Docker - 建置和部署服務
系列文
Ionic結合ChatGPT - 30天打造AI英語口說導師APP30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言