使用百度语音解析

  1. 新建utils/voice.js文件
function voicePrompt (text) {
  new Audio('https://tts.baidu.com/text2audio?cuid=baike&lan=ZH&ctp=2&pdt=301&vol=9&rate=32&per=4&tex=' + text).play()
}
export {
  voicePrompt
}
  • main.js注册原型
// 语音提醒
import { voicePrompt } from './utils/voice'
Vue.prototype.$voice = voicePrompt
  • 合适的时机调用，并传入文字
this.$voice('您有新的订单，请及时处理')

纯原生自定义录音播放暂停

  • audio标签 controls
<audio
 controls
 src="http://cdn.xxtao.com/cms/audio/yesterday once more.mp3">
</audio>
  • 自定义样式
    在这里插入图片描述
 <div style="height:30px;line-height:30px;" class="flex_l">
      <span>通话录音：</span>
      <audio
          id='audio'
          src='http://cdn.xxtao.com/cms/audio/yesterday once more.mp3'
          preload='metadata'>
      </audio>
      <i id="icon1" class="el-icon-video-play pointer size-20" onclick="play(1)"></i>
      <i id="icon2" style="display:none" class="el-icon-video-pause pointer size-20" onclick="play(2)"></i>
 </div>
 
 // 监听录音播放完毕
this.audio = document.querySelector('#audio');
this.audio.addEventListener('ended', e => {
	document.querySelector('#icon2').style.display = 'none'
	document.querySelector('#icon1').style.display = 'block'
});

 // 点击播放暂停录音
  window.play = (e) => {
     if (e == 1) {
         document.querySelector('#icon1').style.display = 'none'
         document.querySelector('#icon2').style.display = 'block'
         this.audio.play()
     } else {
         document.querySelector('#icon2').style.display = 'none'
         document.querySelector('#icon1').style.display = 'block'
         this.audio.pause()
     }
 }

使用录的语音 语音合成器

bug：用了几天MP3文件就失效了

  1. audio标签
<audio id="audio" src="https://www.coder.work/pub/text2audio/NAbPPbpW.mp3"></audio>
  1. 在合适的时机调取播放
var Music = document.getElementById('audio')
Music.play()

录音纯js实现

var Music = new Audio('https://www.coder.work/pub/text2audio/NAbPPbpW.mp3')
Music.play()

有道

new Audio("http://tts.youdao.com/fanyivoice?word=你好，我是你好&le=zh&keyfrom=speaker-target").play();

SpeechSynthesisUtterance

SpeechSynthesisUtterance是HTML5中新增的API,用于将指定文字合成为对应的语音.也包含一些配置项,指定如何去阅读(语言,音量,音调)等，不支持IE浏览器。

属性

  • SpeechSynthesisUtterance.lang 获取并设置话语的语言
  • SpeechSynthesisUtterance.pitch 获取并设置话语的音调(值越大越尖锐,越低越低沉)
  • SpeechSynthesisUtterance.rate 获取并设置说话的速度(值越大语速越快,越小语速越慢)
  • SpeechSynthesisUtterance.text 获取并设置说话时的文本
  • SpeechSynthesisUtterance.voice 获取并设置说话的声音
  • SpeechSynthesisUtterance.volume 获取并设置说话的音量

方法
speak() 将对应的实例添加到语音队列中
cancel() 删除队列中所有的语音.如果正在播放,则直接停止
pause() 暂停语音
resume() 恢复暂停的语音
getVoices 获取支持的语言数组. 注意:必须添加在voiceschanged事件中才能生效

  • vue2使用
// 调取语音播报
let playVoice = (data) => {
  const synth = window.speechSynthesis;
  const speech = new SpeechSynthesisUtterance();
  speech.text = "新的公告已发布，请及时个三顿饭付过付付付付付付付付付付付付付付付或"; // 文字内容
  speech.lang = "zh-CN"; // 使用的语言:中文
  speech.volume = 1; // 声音音量：1
  speech.rate = 1; // 语速：1
  speech.pitch = 1; // 音高：1
  synth.speak(speech); // 播放
};
  • vue3 使用
    亲测：bug1：谷歌浏览器不支持播放；edge和360可以
    == bug2：需要初始化成功才可播报==
import Speech from "speak-tts";
// 语音播报初始化
const speech = ref(null);
let speechInt = () => {
  speech.value = new Speech();
  speech.value.setLanguage("zh-CN");
  speech.value.volume = 100;
  speech.value.init().then(() => {
    console.log("语音播报初始化完成");
  });
};
speechInt()
// 在某个时机调取播放方法
let playVoice = (text) => {
  console.log(text, 99999999999999999);
  speech.value
    .speak({
      text: text + ',请尽快处理' // 文字内容,
    })
    .then(() => {
      console.log("播报完成");
      speech.value.cancel();
    });
};

vue2 语音播报组件

在这里插入图片描述

<template>
  <div>
    <div class="playArea pd-30 relative play-bg1">
      <div class="over-hidden" style="height: 1.6rem">
        <vue-seamless-scroll :data="listData" @ScrollEnd="ScrollEnd" :class-option="defaultOption" ref="scroll3">
          <div v-for="(item, index) in listData" :key="index">
            {{ item.con }}
          </div>
        </vue-seamless-scroll>
      </div>
      <img v-if="!play" @click="speakTtsSpeech" src="../components/img/play.png"
        style=" position: absolute;bottom: -0.1rem;left: 50%; width: .3rem;height: .3rem;margin-left: -0.15rem;">
      <img v-if="play" @click="speakStop" src="../components/img/stop.png"
        style=" position: absolute;bottom: -0.1rem;left: 50%; width: .3rem;height: .3rem;margin-left: -0.15rem;">
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
const synth = window.speechSynthesis;
const msg = new SpeechSynthesisUtterance();

export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      play: false, // 是否播放
      listData: [{
        con: '党的二十大报告指出，实施积极应对人口老龄化国家战略，发展养老事业和养老产业，优化孤寡老人服务，推动实现全体老年人享有基本养老服务。',
      }, {
        con: '截止2022年末2023年初,徐州沛县常住人口102.67万人，户籍人口126.67万人，男性66.23万人，女性60.44万人。年龄结构中0至14岁占比23.54%，15至59岁占比56.49%，60岁以上占比19.97%，65岁以上占比15.31%。徐州沛县作为江苏省徐州市下辖的一个地区，其老龄化现象较为显著。突出表现在以下几个方面：',
      }, {
        con: '第一：老年人口规模相对较大。第二：存在大量高龄老人，包括百岁以上的长寿老人。第三老龄化趋势明显，与整个徐州市乃至江苏省的普遍态势相符。',
      }],
      listData1: '党的二十大报告指出，实施积极应对人口老龄化国家战略，发展养老事业和养老产业，优化孤寡老人服务，推动实现全体老年人享有基本养老服务。截止2022年末2023年初,徐州沛县常住人口102.67万人，户籍人口126.67万人，男性66.23万人，女性60.44万人。年龄结构中0至14岁占比23.54%，15至59岁占比56.49%，60岁以上占比19.97%，65岁以上占比15.31%。徐州沛县作为江苏省徐州市下辖的一个地区，其老龄化现象较为显著。突出表现在以下几个方面：第一：老年人口规模相对较大。第二：存在大量高龄老人，包括百岁以上的长寿老人。第三老龄化趋势明显，与整个徐州市乃至江苏省的普遍态势相符。'

    }
  },
  computed: {
    defaultOption() {
      return {
        hoverStop: true,
        autoPlay: true,
        step: 0.05, // 数值越大速度滚动越快
        // waitTime: 2000,//单步停止等待时间(默认值 1000ms)
        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
        direction: 1, // 0向下 1向上 2向左 3向右
        // openWatch: true, // 开启数据实时监控刷新dom
        // singleHeight: 30, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        // singleWidth: 60, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
      };
    },
  },
  beforeDestroy() {
    synth.cancel(msg);
    // this.speakStop()
  },
  methods: {
    speakStop() {
      this.handleStop();
      this.play = false;
      console.log('this.play', this.play);
      // this.$refs.scroll3._cancle()
      // this.$refs.scroll3.reset()
    },
    ScrollEnd() {
      console.log("滚动结束", 6666666)
    },
    speakTtsSpeech() {
      // this.$refs.scroll3._startMove()
      this.play = true;
      this.handleSpeak(this.listData1);
      console.log('开始播放');
    },
    handleSpeak(text) {
      msg.text = text; // 文字内容: 小朋友，你是否有很多问号
      msg.lang = "zh-CN"; // 使用的语言:中文
      msg.volume = 100; // 声音音量：1
      msg.rate = 1; // 语速：1
      msg.pitch = 1; // 音高：1
      msg.onstart = function (event) {
        console.log('开始说话', event);
      };
      synth.speak(msg); // 播放
      // 添加end事件监听器
      msg.onend = () => {
        console.log('语音播报已结束');
        // 可以在此处执行播报结束后需要做的操作
        setTimeout(() => {
          // this.speakTtsSpeech()
          synth.speak(msg); // 重新播放
        }, 2000)
      };
    },
    handleStop(e) {
      msg.text = e;
      msg.lang = "zh-CN";
      msg.volume = 100; // 声音音量：1
      msg.rate = 1; // 语速：1
      msg.pitch = 1; // 音高：1
      synth.cancel(msg);
      console.log('停止');
    },
  }
}
</script>

<style lang="scss" scoped>
@import "./css/rem.scss";

.playArea {
  position: absolute;
  right: .125rem;
  top: .125rem;
  color: #fff;
  z-index: 99;
  width: 3.8rem;
  height: 2.5rem;
}

.play-bg1 {
  background: url('../components/img/bg-play1.png') no-repeat center center;
  background-size: 100% 100%;

}

.play-bg2 {
  background: url('../components/img/bg-play2.png') no-repeat center center;
  background-size: 100% 100%;

}
</style>
# vue.js # javascript # 语音识别
GitHub 加速计划 / vu / vue
108
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：3 个月前 )
9e887079 [skip ci] 1 年前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

cover

Hunyuan OCR & Z-Image-Turbo 正式上线！两大模型在 NPU 加速平台完成部署，开启 AI 识图新时代！

avatar AtomGit开源社区
cover

智谱开源天团登陆 AtomGit，4 大模型覆盖多模态全场景！

avatar AtomGit开源社区

[深度评测] Zotero vs. EndNote vs. 沁言学术：下一代科研文献管理与知识生成平台的架构对比与选型指南

然而，随着AI技术的浪潮席卷而来，我们对科研工具的期待正在发生根本性转变——我们不再满足于一个被动的管理器，而是渴望一个能够主动辅助思考、生成洞见的“智能知识工作空间”。本文将从技术架构的视角，深度对比经典代表Zotero/EndNote与新生代平台“沁言学术”，探讨它们在设计哲学、技术实现和未来潜力上的核心差异，并为不同需求的研究者提供一份实用的选型指南。它们将数据处理和智能计算的重心迁移到云端

avatar AtomGit开源社区