Question

这是有关“语音识别文本”的javascript。该脚本在click上运行。但是我想在窗口/页面加载时运行该脚本。我实际上不是javascript家伙。请您帮我修改脚本？

其他：[不是必须回答]：另外，我想将html代码修改为现有的“ Vuitify”格式的简单html代码。您能帮忙吗？

注意：在这里，我添加了仅适用于“ Goggle Crome”浏览器的“代码段”。

var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
        var recognition = SpeechRecognition ? new SpeechRecognition() : false;
        Vue.component('speech-to-text', {
        template: '\n    <v-card>\n    <v-card-text>\n      <v-layout row wrap justify-space-around>\n        <v-flex xs8 sm9 text-xs-center>\n          <p v-if="error" class="grey--text">{{error}}</p>\n          <p v-else class="mb-0">\n            <span v-if="sentences.length > 0" v-for="sentence in sentences">{{sentence}}. </span>\n            <span>{{runtimeTranscription}}</span>\n          </p>\n        </v-flex>\n        <v-flex xs2 sm1 text-xs-center>\n          <v-btn\n            dark\n            @click.stop="toggle ? endSpeechRecognition() : startSpeechRecognition()"\n            icon\n            :color="!toggle ? \'grey\' : (speaking ? \'red\' : \'red darken-3\')"\n            :class="{\'animated infinite pulse\': toggle}"\n          >\n            <v-icon>{{toggle ? \'mic_off\' : \'mic\'}}</v-icon>\n          </v-btn>\n        </v-flex>\n      </v-layout>\n    </v-card-text>\n  </v-card>\n  ',
                props: {
                lang: {
                type: String,
                        default: 'en-US' },
                        text: {
                        type: [String, null],
                                required: true } },
                data: function data() {
                return {
                error: false,
                        speaking: false,
                        toggle: false,
                        runtimeTranscription: '',
                        sentences: [] };
                },
                methods: {
                checkCompatibility: function checkCompatibility() {
                if (!recognition) {
                this.error = 'Speech Recognition is not available on this browser. Please use Chrome or Firefox';
                }
                },
                        endSpeechRecognition: function endSpeechRecognition() {
                        recognition.stop();
                                this.toggle = false;
                                this.$emit('speechend', {
                                sentences: this.sentences,
                                        text: this.sentences.join('. ') });
                        },
                        startSpeechRecognition: function startSpeechRecognition() {var _this = this;
                                if (!recognition) {
                        this.error = 'Speech Recognition is not available on this browser. Please use Chrome or Firefox';
                                return false;
                        }
                        this.toggle = true;
                                recognition.lang = this.lang;
                                recognition.interimResults = true;
                                recognition.addEventListener('speechstart', function (event) {
                                _this.speaking = true;
                                });
                                recognition.addEventListener('speechend', function (event) {
                                _this.speaking = false;
                                });
                                recognition.addEventListener('result', function (event) {
                                var text = Array.from(event.results).map(function (result) {return result[0]; }).map(function (result) {return result.transcript; }).join('');
                                        _this.runtimeTranscription = text;
                                });
                                recognition.addEventListener('end', function () {
                                if (_this.runtimeTranscription !== '') {
                                _this.sentences.push(_this.capitalizeFirstLetter(_this.runtimeTranscription));
                                        _this.$emit('update:text', '' + _this.text + _this.sentences.slice( - 1)[0] + '. ');
                                }
                                _this.runtimeTranscription = '';
                                        recognition.stop();
                                        if (_this.toggle) {
                                // keep it going.
                                recognition.start();
                                }
                                });
                                recognition.start();
                        },
                        capitalizeFirstLetter: function capitalizeFirstLetter(string) {
                        return string.charAt(0).toUpperCase() + string.slice(1);
                        } },
                mounted: function mounted() {
                this.checkCompatibility();
                } });
        new Vue({
        el: '#app',
                data: function data() {
                return {
                text: '',
                        sentences: null };
                },
                methods: {
                speechEnd: function speechEnd(_ref) {var sentences = _ref.sentences, text = _ref.text;
                        console.log('text', text);
                        console.log('sentences', sentences);
                        this.sentences = sentences;
                } } });

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
<link rel='stylesheet' href='https://unpkg.com/vuetify@1.0.17/dist/vuetify.min.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css'>
<div id="app">
                <v-app id="inspire">
                    <v-container fluid>
                        <v-layout row wrap justify-center class="mt-4">
                            <v-flex xs12 sm10 text-xs-center>
                                <v-text-field name="x"
                                              label="The text"
                                              v-model="text"
                                              textarea
                                              ></v-text-field>
                            </v-flex>
                            <v-flex xs12 sm8 md4 text-xs-center>
                                <speech-to-text :text.sync="text" @speechend="speechEnd"></speech-to-text>
                            </v-flex>
                            <v-flex xs12 text-xs-center class="mt-4">
                                {{sentences}}
                            </v-flex>
                        </v-layout>
                    </v-container>
                </v-app>

            </div>

        
        <script src='https://unpkg.com/babel-polyfill/dist/polyfill.min.js'></script>
        <script src='https://unpkg.com/vue/dist/vue.js'></script>
        <script src='https://unpkg.com/vuetify@1.0.17/dist/vuetify.min.js'></script>

Answer 1

您可以将JavaScript代码包装到一个函数中，并使用<body onload="wrappedFunction();">在正文加载时调用该包装的函数

请确保在此之前已加载脚本/依赖项。您可以在<head>

中添加脚本

修改javascript以在窗口加载时加载

1 个答案: