.NET 6录音播放应用：点击播放同步展示录音文本实现咨询

一、修正并优化后端接口 #

你的现有接口存在拼写错误、未正确赋值识别文本、未支持流式传输等问题，以下是优化后的实现：

1. 普通文本返回接口（适用于小体积文本）

[HttpPost]
public ActionResult GetRecording(string recKey)
{
    var pathObj = new GetRecordingPath();
    string filePath = pathObj.GetPath(recKey);

    var speechService = new SpeechRecognisation();
    string recognizedText = speechService.GetData(filePath);

    // 正确赋值文本内容给实体类
    var recordingText = new RecordingText { Text = recognizedText };          
    return Ok(recordingText); // 依托ASP.NET自动序列化，无需手动调用JsonConvert
}

2. 流式传输接口（适用于大体积文本）

如果文本内容极大，用流式返回可避免内存占用过高，需要先修改SpeechRecognisation类，新增流式读取识别结果的方法：

[HttpPost]
public async IAsyncEnumerable<string> GetRecordingStream(string recKey)
{
    var pathObj = new GetRecordingPath();
    string filePath = pathObj.GetPath(recKey);

    var speechService = new SpeechRecognisation();
    // 假设GetDataStream是新增的流式识别方法，逐段返回文本块
    await foreach (var textChunk in speechService.GetDataStream(filePath))
    {
        yield return textChunk;
    }
}

二、前端页面调整 #

无需修改原视图模型，直接在页面中添加文本展示区域和音频控件，并编写交互逻辑：

1. 添加页面元素

在表格所在视图中插入以下HTML：

<!-- 音频播放控件 -->
<audio id="recordingPlayer" controls style="display:none; margin:10px 0;"></audio>

<!-- 录音文本展示容器 -->
<div id="recordingTextContainer" style="padding:10px; border:1px solid #eee;">
    <h4>录音转写文本</h4>
    <div id="recordingText" style="white-space:pre-wrap; max-height:300px; overflow-y:auto;"></div>
</div>

2. 编写点击交互逻辑

给表格中的播放按钮绑定点击事件，同时实现录音播放和文本加载：

// 遍历所有播放按钮，绑定点击事件
document.querySelectorAll('.play-btn').forEach(btn => {
    btn.addEventListener('click', async function() {
        const recKey = this.dataset.recKey; // 假设按钮通过data-rec-key存储录音标识
        const player = document.getElementById('recordingPlayer');
        const textDisplay = document.getElementById('recordingText');

        // 1. 启动录音播放（需新增播放接口，见下方补充）
        player.src = `/api/Recording/Play?recKey=${recKey}`;
        player.style.display = 'block';
        player.play();

        // 2. 加载文本（小文本用普通接口，大文本切换为流式接口）
        textDisplay.textContent = ''; // 清空历史内容
        // --- 普通文本加载 ---
        // const res = await fetch('/api/Recording/GetRecording', {
        //     method: 'POST',
        //     headers: { 'Content-Type': 'application/json' },
        //     body: JSON.stringify({ recKey })
        // });
        // const data = await res.json();
        // textDisplay.textContent = data.text;

        // --- 流式文本加载 ---
        const res = await fetch('/api/Recording/GetRecordingStream', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ recKey })
        });
        const reader = res.body.getReader();
        const decoder = new TextDecoder('utf-8');
        
        while (true) {
            const { done, value } = await reader.read();
            if (done) break;
            textDisplay.textContent += decoder.decode(value, { stream: true });
        }
    });
});

三、补充必要接口 #

如果还没有录音文件播放接口，新增以下后端方法：

[HttpGet]
public IActionResult Play(string recKey)
{
    var pathObj = new GetRecordingPath();
    string filePath = pathObj.GetPath(recKey);
    // 根据录音实际格式修改MIME类型（比如audio/wav、audio/mp3）
    return PhysicalFile(filePath, "audio/mpeg");
}

同时确保播放按钮添加data-rec-key属性：

<button class="play-btn" data-rec-key="@item.RecKey">播放</button>

内容的提问来源于stack exchange，提问作者Dnyati