html谷歌浏览器实现自动播报语音,vue中解决chrome浏览器自动播放音频 和MP3语音打包到线上...

1. 谷歌浏览器实现自动播报语音

可以使用 HTML5 的 Web Speech API 实现自动播报语音，具体步骤如下：

1) 创建 SpeechSynthesis 实例

const synth = window.speechSynthesis;

2) 创建 SpeechSynthesisUtterance 实例

const utterance = new SpeechSynthesisUtterance('Hello World');

这里的 `'Hello World'` 是需要播报的文本内容。

3) 设置 SpeechSynthesisUtterance 实例的属性

utterance.lang = 'en-US'; // 播报语言
utterance.rate = 1; // 播报速度
utterance.pitch = 1; // 播报音调
utterance.volume = 1; // 播报音量

4) 调用 SpeechSynthesis 实例的 speak() 方法开始播报

synth.speak(utterance);

2. Vue中解决Chrome浏览器自动播放音频

在 Chrome 浏览器中，自动播放音频需要用户交互触发，否则会被浏览器屏蔽。解决方法如下：

1) 使用用户交互触发播放

比如在用户点击一个按钮或者进行某个操作后才播放音频。

2) 在播放前让用户进行交互

可以让用户点击一个按钮或者滑动页面时，弹出提示框，让用户授权播放音频。

3. MP3语音打包到线上

可以使用 Webpack 的 file-loader 或者 url-loader 将 MP3 文件打包到项目中，然后在代码中引用即可。

1) 安装 file-loader 或 url-loader

npm install file-loader --save-dev

或者

npm install url-loader --save-dev

2) 在 Webpack 配置文件中添加 loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.(mp3)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'audio/'
            }
          }
        ]
      }
    ]
  }
}

或者

module.exports = {
  module: {
    rules: [
      {
        test: /\.(mp3)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: '[name].[ext]',
              outputPath: 'audio/'
            }
          }
        ]
      }
    ]
  }
}

这里的 `test: /\.(mp3)$/` 表示匹配以 `.mp3` 结尾的文件，`outputPath` 表示打包后的文件输出路径。

3) 在代码中引用 MP3 文件

import audio from './audio/hello.mp3';

const audioEl = new Audio(audio);
audioEl.play();