js 语音播报

<template>

<div>

<el-button  @ click = " speak " > 播放 </el-button>

<el-button  @ click = " pause " > 暂停 </el-button>

<el-button  @ click = " resume " > 继续播放 </el-button>

<el-button  @ click = " cancel " > 取消播放 </el-button>

</div>

</template>

<script>

const synth = window . speechSynthesis ;

var speech = new SpeechSynthesisUtterance ();

export default  {

data () {

return  {

timer: null ,

i: 0 ,

message:  [

"南通报警" ,

"北京报警"

      ]

    };

  },

methods:  {

speak () {

// for (let i = 0; i < this.message.length; i++) {

// this.i = 0;

console . log ( synth . getVoices ());

let voices = synth . getVoices ();

speech . pitch = 1 ;  // 获取并设置话语的音调(值越大越尖锐,越低越低沉)

speech . rate = 3 ;  // 获取并设置说话的速度(值越大语速越快,越小语速越慢)

speech . voice = voices [ 0 ];  // 获取并设置说话的声音，感觉跟设置播放语言类似

speech . volume = 1 ;  // 获取并设置说话的音量

// speech.lang = 'zh-CN' // 设置播放语言

// speech.cancel() // 删除队列中所有的语音.如果正在播放,则直接停止

speech . text = this . message ;  // 获取并设置说话时的文本

synth . speak ( speech );

if  ( this . i == 1 ) {

clearTimeout ( this . timer );

        }  else  {

this . timer = setTimeout (()  =>  {

this . i ++ ;

this . speak ();

          },  1000 );

        }

// }

    },

// 暂停

pause () {

synth . pause ();

    },

// 继续播放

resume () {

synth . resume ();

    },

// 取消播放

cancel () {

synth . cancel ();

    }

  }

};

</script>