You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

ASP.NET中使用Speech类实现TTS后页面持续加载无法停止的问题

解决ASP.NET中Speech类TTS导致页面无限加载的问题

嘿,我来帮你搞定这个问题!首先得搞清楚两个关键点:为什么页面会无限加载,以及你可能在服务器端TTS上踩了个大坑。

问题根源

你用的SpeakAsync是异步方法,但ASP.NET的页面生命周期会默认等待所有关联的异步操作完成才会向客户端返回响应。而SpeechSynthesizer的异步回调并没有正确通知页面线程结束,导致页面一直处于"等待服务器响应"的状态,也就是无限加载。

另外,还有个容易忽略的点:你在服务器端调用Speech类,语音是在服务器的扬声器播放的,而不是用户的浏览器!这几乎肯定不是你想要的效果对吧?

解决方案一:修复服务器端TTS的加载问题(不推荐,因为语音在服务器播放)

如果你确实需要在服务器端播放语音(比如服务器本身需要发声),可以通过以下方式避免页面阻塞:

方式1:用后台任务执行同步说话

把说话操作放到后台线程,让页面直接结束响应:

protected void PlayButton_Click(object sender, EventArgs e)
{
    var sp = new SpeechSynthesizer();
    sp.SpeakAsyncCancelAll();
    sp.Volume = 100;
    
    // 把说话操作丢到后台线程,页面不等待它完成
    Task.Run(() =>
    {
        sp.Speak(rword.partofspeech);
        sp.Dispose(); // 用完记得释放资源
    });
    
    // 立即结束页面响应,避免等待
    Response.End();
}

方式2:监听SpeakCompleted事件结束响应

通过事件回调来通知页面结束加载:

private SpeechSynthesizer _speechSynth;

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        _speechSynth = new SpeechSynthesizer();
        _speechSynth.SpeakCompleted += SpeechSynth_SpeakCompleted;
        Session["SpeechSynth"] = _speechSynth; // 回发时保留对象
    }
    else
    {
        _speechSynth = (SpeechSynthesizer)Session["SpeechSynth"];
        _speechSynth.SpeakCompleted += SpeechSynth_SpeakCompleted;
    }
}

private void SpeechSynth_SpeakCompleted(object sender, SpeakCompletedEventArgs e)
{
    // 说话完成后结束页面响应
    if (Response.IsClientConnected)
    {
        Response.End();
    }
}

protected void PlayButton_Click(object sender, EventArgs e)
{
    _speechSynth.SpeakAsyncCancelAll();
    _speechSynth.Volume = 100;
    _speechSynth.SpeakAsync(rword.partofspeech);
}

解决方案二:改用客户端TTS(强烈推荐,符合用户需求)

真正应该做的是让用户在自己的浏览器里听到语音,这时候用Web Speech API(纯前端JavaScript)就完美解决了,还不会有服务器页面加载的问题:

步骤1:添加前端JS函数

在页面的<script>标签里添加:

// 全局变量保存当前的语音实例
let currentUtterance = null;

function playSpeech(text) {
    // 取消之前的播放
    if (currentUtterance) {
        window.speechSynthesis.cancel();
    }
    
    // 创建新的语音实例
    currentUtterance = new SpeechSynthesisUtterance(text);
    currentUtterance.volume = 1; // 音量0-1,对应服务器端的0-100
    currentUtterance.lang = 'en-US'; // 可以设置语言,比如中文是'zh-CN'
    
    // 播放完成后清空实例
    currentUtterance.onend = () => {
        currentUtterance = null;
    };
    
    window.speechSynthesis.speak(currentUtterance);
}

步骤2:ASP.NET页面调用JS函数

在你的按钮点击事件里,注册客户端脚本:

protected void PlayButton_Click(object sender, EventArgs e)
{
    // 获取要播放的文本
    string speechText = rword.partofspeech;
    // 调用前端的playSpeech函数
    ClientScript.RegisterStartupScript(this.GetType(), "PlaySpeech", $"playSpeech('{HttpUtility.JavaScriptStringEncode(speechText)}');", true);
}

这样一来,语音在用户的本地浏览器播放,服务器页面会立即响应,完全不会出现无限加载的问题,体验也更符合用户预期。

内容的提问来源于stack exchange,提问作者iamal

火山引擎 最新活动