extjs - 在 Extjs 中获取音频和发音 word - word to Speech

Question

如何实现单词到语音？

假设我有一个文本字段和一个按钮。我想在用英语发音的文本字段中输入单词。

另外，是否可以只从 Merriam-Webster 在线词典 www.merriam-webster.com/dictionary/stack中获取音频发音并在不打开页面的情况下播放？

或者，也许来自朗文在线发音词典https://www.ldoceonline.com/dictionary/overflow？

我注意到字典中单词的路径具有恒定的模式 - https://www.merriam-webster.com/dictionary/ + 单词，如屏幕截图中所示。

所以，我的问题是：是否可以只提取音频文件（.mp3）并在不打开页面的情况下播放它？

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.create({
            xtype: 'panel',
            renderTo: Ext.getBody(),
            width: 300,
            items: [
            {
                xtype: 'textfield',
                name: 'word',
                fieldLabel: 'Word',
            },{
                xtype: 'button',
                text: 'Pronounce',
                listeners: {
                click: function() {
                    //PRONOUNCE THE WORD
                    // ...
                    // ...;
                    }
                }
            }]
        });
    }
});

标签： extjsspeech

Answer 1

在 html 中包括以下内容：

<script src='https://code.responsivevoice.org/responsivevoice.js'></script>

小提琴代码如下：

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.application({
            name: 'Fiddle',

            launch: function () {
                Ext.create({
                    xtype: 'panel',
                    renderTo: Ext.getBody(),
                    width: 300,
                    items: [{
                        xtype: 'textfield',
                        name: 'word',
                        fieldLabel: 'Word',
                    }, {
                        xtype: 'button',
                        text: 'Pronounce',
                        listeners: {
                            click: function () {
                                const speechText = this.previousNode().getValue();
                                if(speechText) {
                                    responsiveVoice.speak(speechText);
                                }
                                
                            }
                        }
                    }]
                });
            }
        });
    }
});