使用 Chrome Devtools 捕获 WebSocket 音频文件

如何解决使用 Chrome Devtools 捕获 WebSocket 音频文件

我想知道是否可以使用 Chrome DevTools 捕获通过 Websocket 协议播放的音频

在网络下，我确实在音频开始播放后看到了一个 Websocket 条目。它被列为 wss://eastus.tts.speech.microsoft.com/cognitiveservices/websocket/v1?Authorization=RandomCharacterConnectionId=IDGoesHere

我检查了它的标题和消息，但似乎无法获取音频文件。

有什么建议吗？例子在这里 https://azure.microsoft.com/en-us/services/cognitive-services/text-to-speech/

谢谢

解决方法

如果要将生成的音频保存为 .mp3 文件，请尝试以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Microsoft Cognitive Services Speech SDK JavaScript Quickstart</title>
  <meta charset="utf-8" />
</head>
<body>
  
  <button id="startSpeakTextAsyncButton" onclick="synthesizeSpeech()">speak</button>
  
  <script src="microsoft.cognitiveservices.speech.sdk.bundle.js"></script>

  <script>
    function synthesizeSpeech() {
        
        var speechConfig = SpeechSDK.SpeechConfig.fromSubscription("","");
        
        speechConfig.SpeechSynthesisLanguage = "en-US";
        
        const synthesizer = new SpeechSDK.SpeechSynthesizer(speechConfig);

    synthesizer.speakTextAsync(
        "Hello,this is a demo about saving result of TTS API as a file",result => {
            synthesizer.close();
            const link = document.createElement( 'a' );
            link.style.display = 'none';
            document.body.appendChild( link );


            const blob = new Blob( [result.audioData],{ type: 'audio/mp3' } ); 
            const objectURL = URL.createObjectURL( blob );
             
            link.href = objectURL;
            link.href = URL.createObjectURL( blob );
            link.download =  'data.mp3';
            link.click();
        },error => {
            console.log(error);
            synthesizer.close();
        });
    }
  
  </script>
</body>
</html>

结构：

结果：