ホームページ > 記事 > バックエンド開発 > 質問の音声および音声認識要素をオンラインクイズに追加する方法

質問の音声および音声認識要素をオンラインクイズに追加する方法

PHPzオリジナル: 2023-09-24 08:24:291402ブラウズ

オンラインの質問に回答する際に質問のオーディオおよび音声認識要素を追加するには、特定のコード例が必要です

インターネットテクノロジーの発展により、オンラインの質問に回答することが可能になりました。人々が学ぶ方法であり、試験を受ける一般的な方法の 1 つです。オンラインで質問に回答することで、学生はいつでもどこでも、便利かつ迅速に学習やテストを行うことができます。オンラインで質問に回答するインタラクティブな体験と効率を向上させるために、質問に音声認識要素を追加して、学生が音声で回答できるようにして学習効果を向上させることを検討できます。この記事では、質問の音声認識要素と音声認識要素をオンライン回答に追加する方法を紹介し、コード例を示します。

1. 質問の音声要素を追加する

学生が質問の音声コンテンツを聞くことができるように、質問に音声要素を追加する必要があります。 HTML5 には、オーディオ再生機能を簡単に実装できる

<!DOCTYPE html>
<html>
<head>
    <title>在线答题</title>
</head>
<body>
    <!-- 题目内容 -->
    <h3>题目：请听音频并选择正确答案</h3>

    <!-- 音频元素 -->
    <audio controls>
        <source src="题目音频文件路径" type="audio/mpeg">
    </audio>

    <!-- 题目选项 -->
    <h4>A. 选项一</h4>
    <h4>B. 选项二</h4>
    <h4>C. 选项三</h4>
    <h4>D. 选项四</h4>

    <!-- 学生作答区域 -->
    <input type="radio" name="choice" value="A" />A
    <input type="radio" name="choice" value="B" />B
    <input type="radio" name="choice" value="C" />C
    <input type="radio" name="choice" value="D" />D

    <!-- 确认按钮 -->
    <button onclick="checkAnswer()">确认答案</button>

    <!-- 答案显示区域 -->
    <div id="result"></div>

    <script>
        // 验证答案的函数
        function checkAnswer() {
            // 获取学生的答案
            var choice = document.querySelector('input[name="choice"]:checked').value;

            // 比较学生的答案和正确答案
            if (choice === "B") {
                // 显示回答正确
                document.getElementById('result').innerHTML = '回答正确！';
            } else {
                // 显示回答错误
                document.getElementById('result').innerHTML = '回答错误！';
            }
        }
    </script>
</body>
</html>

上記のコードでは、

2. 音声認識要素の追加

学生が音声で回答し、音声認識機能を実現できるようにするために、Web Speech API を使用できます。 Web Speech API を使用すると、ブラウザで音声合成と音声認識が可能になります。具体的なコード例は次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <title>在线答题</title>
</head>
<body>
    <!-- 题目内容 -->
    <h3>题目：请听音频并用语音回答</h3>

    <!-- 音频元素 -->
    <audio controls>
        <source src="题目音频文件路径" type="audio/mpeg">
    </audio>

    <!-- 语音输入按钮 -->
    <button onclick="startListening()">开始语音输入</button>

    <!-- 学生回答 -->
    <p>学生回答：<span id="answer"></span></p>

    <!-- 确认按钮 -->
    <button onclick="checkAnswer()">确认答案</button>

    <!-- 答案显示区域 -->
    <div id="result"></div>

    <script>
        // 语音识别对象
        var recognition = new webkitSpeechRecognition();

        // 开始语音输入
        function startListening() {
            recognition.start();
        }

        // 接收识别结果
        recognition.onresult = function(event) {
            var transcript = event.results[0][0].transcript;

            // 显示学生的回答
            document.getElementById('answer').innerHTML = transcript;
        }

        // 验证答案的函数
        function checkAnswer() {
            // 获取学生的回答
            var answer = document.getElementById('answer').innerHTML;

            // 比较学生的回答和正确答案
            if (answer === "正确答案") {
                // 显示回答正确
                document.getElementById('result').innerHTML = '回答正确！';
            } else {
                // 显示回答错误
                document.getElementById('result').innerHTML = '回答错误！';
            }
        }
    </script>
</body>
</html>

上記のコードでは、まず音声認識用の

SpeechRecognition オブジェクトを作成します。次に、ボタン startListening() をクリックして音声入力を開始し、onresult イベントで音声認識の結果を取得し、生徒の解答領域に表示します。最後に、checkAnswer() 関数を使用して生徒の回答を確認し、回答結果を表示します。

上記のコード例を通じて、質問の音声認識要素と音声認識要素をオンライン回答に追加して、学習エクスペリエンスと効果を向上させることができます。お役に立てれば幸いです!

以上が質問の音声および音声認識要素をオンラインクイズに追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html5 对象事件

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：ランダムな回答の質問を生成する方法次の記事：ランダムな回答の質問を生成する方法

続きを見る

質問の音声および音声認識要素をオンライン クイズに追加する方法

関連記事

質問の音声および音声認識要素をオンラインクイズに追加する方法