美文网首页
H5语音识别/合成 波形图

H5语音识别/合成 波形图

作者: 李霖弢 | 来源:发表于2020-06-09 17:41 被阅读0次

    语音识别(兼容性较差)

    var newRecognition = new webkitSpeechRecognition();
    

    语音合成

    即文字转语音

    let msg = new window.SpeechSynthesisUtterance('你好,我是康师傅');
    document.body.onclick = function () {
       window.speechSynthesis.speak(msg);
    }
    
    SpeechSynthesisUtterance实例属性和回调
    • text – 文字内容
    • lang – 语言,如:"zh-cn"
    • voiceURI – 指定希望使用的声音和服务,字符串。
    • volume – 音量,0~1,默认1。
    • rate – 语速,0.1~10,默认1。
    • pitch – 音调,0~2,默认1。
    • onstart
    • onpause
    • onresume
    • onend
    speechSynthesis 方法

    speak() – 传入SpeechSynthesisUtterance实例,读合成的话语。
    stop() – 终止合成过程。
    pause() – 暂停合成过程。
    resume() – 重新开始合成过程。
    getVoices – 返回浏览器支持的语音包列表

    波形图插件 wfplayer

    <script src="https://github.com/zhw2590582/WFPlayer/tree/master/dist/wfplayer.js"></script>
    <body>
      <div id="waveform" style="width: 1000px; height: 300px"></div>
      <audio id="audio" src="./bg.mp3" autoplay></audio>
    </body>
    <script>
      var wf = new WFPlayer({
        container: document.querySelector('#waveform'),
        backgroundColor: 'rgba(100, 100, 100,0.5)',
        waveColor: 'red',
        cursor: true,
        progress: true,
        progressColor: 'rgba(100, 100, 100, 0.5)',
        grid: false,//网格
        ruler: false,//时间刻度
        duration: 10
      });
      wf.load(document.querySelector('#audio'));
    </script>
    

    相关文章

      网友评论

          本文标题:H5语音识别/合成 波形图

          本文链接:https://www.haomeiwen.com/subject/xqletktx.html