JS播放视频同时运行语音识别是否需要使用async？具体如何实现？

你不需要使用async/await实现该需求，Web Speech API的SpeechRecognition接口本身是事件驱动设计，你的功能无法运行是代码存在多处逻辑和语法错误导致的，具体问题和修复方案如下：

存在的问题 #

• 语法错误：所有recognition.start都漏写了执行括号，仅引用了函数并未实际调用，识别结束后不会重启
• 事件绑定逻辑混乱：你为end事件重复绑定了多个监听器，还嵌套绑定了end事件，会导致onresult回调被重复覆盖，无法按顺序填充三个输入框
• 兼容逻辑错误：你注释了全局的SpeechRecognition前缀兼容声明，实例化识别对象的写法也存在问题，部分浏览器会无法正确创建识别实例
• 启动时机问题：点击按钮同时触发模态框弹出和识别启动，麦克风权限请求可能会被模态框渲染逻辑干扰，导致识别无法正常初始化

修复后的代码 #

你可以直接替换原页面中<script>标签内的所有内容：

$('#myModal').on('shown.bs.modal', function () {
  $('#video1')[0].play();
})
$('#myModal').on('hidden.bs.modal', function () {
  $('#video1')[0].pause();
})

const video = document.getElementById('video1');
// 打开语音识别兼容声明
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;              

function record() {
  // 等待模态框完全渲染后再启动识别，避免权限请求被拦截
  setTimeout(() => {
    // 兼容判断
    if (!window.SpeechRecognition) {
      alert('当前浏览器不支持语音识别功能，请使用Chrome、Edge等webkit内核浏览器');
      return;
    }
    const recognition = new SpeechRecognition();
    recognition.interimResults = false; // 仅返回最终识别结果
    recognition.lang = "en-US";

    // 用计数器控制填充顺序
    let fillIndex = 0;
    const inputList = ['name', 'location', 'state'];

    // 识别成功回调
    recognition.onresult = function(event) {
      const text = event.results[0][0].transcript.trim();
      if (fillIndex < inputList.length) {
        document.getElementById(inputList[fillIndex]).value = text;
        fillIndex++;
      }
    }

    // 识别结束回调
    recognition.onend = function() {
      if (fillIndex < inputList.length) {
        // 还有未填充的输入框，重启识别
        recognition.start();
      } else {
        // 全部填充完成，提交表单
        document.getElementById('careid').submit();
      }
    }

    // 错误捕获，方便排查问题
    recognition.onerror = function(event) {
      console.error('语音识别错误：', event.error);
    }

    // 启动识别
    recognition.start();
  }, 300);
}

// video.addEventListener('ended',function(){       
//    window.location.pathname = '/care';
//    document.care.submit();
// })

额外注意事项 #

• 语音识别功能要求站点必须使用HTTPS协议（本地localhost开发场景除外），HTTP站点下浏览器会默认禁用该API
• 要确保用户授予了麦克风访问权限，如果用户拒绝权限，识别功能会直接报错

内容的提问来源于stack exchange，提问作者Thomas J Smith