文字转语音

chrome 文字转语音

• 语音识别(Speech Recognition) —— 语音转文字
  主要是 chrome 和 Opera 两个浏览器有实现
• 语音合成(Speech Synthesis) —— 文字转语音
  主流浏览器都支持（Edge也支持）

语音合成Speech Synthesis API

录音：navigator.mediaDevices.getUserMedia

<button onclick="record()">开始录音</button>
<script>
function record () {
    navigator.mediaDevices.getUserMedia({
        audio: true
    }).then(mediaStream => {
        console.log(mediaStream);
    }).catch(err => {
        console.error(err);
    })  ;
}

为什么localhost能播放，预生产不能播放？

Chrome 47以后，getUserMedia API只能允许来自“安全可信”的客户端的视频音频请求，如HTTPS和本地的Localhost。如果页面的脚本从一个非安全源加载，navigator对象中则没有可用的mediaDevices对象，Chrome抛出错误。

语音功能预生产，预发需要以下配置： 地址栏输入chrome://flags 搜索：insecure origins treated as secure 配置

音频文件存哪里？

语音录一次往阿里云OSS传一次吗？

这样做显示是浪费资源的。

编辑状态：存本地，当前浏览器端可访问即可

发送状态：存OSS，公网可访问

如何存本地？Blob Url的方式保存

如何存OSS？从cms获取token，上传到OSS的xxx-audio bucket，然后得到一个hash

Blob Url那些事儿

Blob Url长什么样？

blob:http://localhost:9090/39b60422-26f4-4c67-8456-7ac3f29115ec

blob对象在前端开发中是非常常见的，下面我将列举几个应用场景：

canvas toDataURL后的base64格式属性，会超出标签属性值有最大长度的限制 <input type="file" />上传文件之后的File对象，最初只想在本地留存，时机合适再上传到服务器

创建BlobUrl：URL.createObjectURL(object)

释放BlobUrl：URL.revokeObjectURL(objectURL)

Blob Url那些事儿

URL的生命周期在vue组件中如何表现？

vue的单文件组件共有一个document，这也是它被称为单页应用的原因，因此可以在组件间直接通过blob URL进行通信。 在vue-router采用hash模式的情况下，页面间的路由跳转，不会重新加载整个页面，所以URL的生命周期非常强力，因此在跨页面（非新tab）的组件通信，也可以使用blob URL。 需要注意的是，在vue的hash mode模式下，需要更加注意通过URL.revokeObjectURL()进行的内存释放

<!--组件发出blob URL-->
<label for="background">上传背景</label>
<input type="file" style="display: none"
           id="background" name="background"
           accept="image/png, image/jpeg" multiple="false"
           @change="backgroundUpload"
>
backgroundUpload(event) {
  const fileBlobURL = window.URL.createObjectURL(event.target.files[0]);
  this.$emit('background-change', fileBlobURL);
  // this.$bus.$emit('background-change', fileBlobURL);
},

<!--组件接收blob URL-->
<BackgroundUploader @background-change="backgroundChangeHandler"></BackgroundUploader>
// this.$bus.$on("background-change", backgroundChangeHandler);
backgroundChangeHandler(url) {
    // some code handle blob url...
},