Compare commits
4 Commits
| Author | SHA1 | Date |
|---|---|---|
 jia
|
d638a2378e | |
|
jia
|
d1f6af0aee | |
|
jia
|
e7b7551a2e | |
 weipengfei
|
b0ea9966c8 |
|
|
@ -1,92 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="contentgb">
|
|
||||||
<view class="return_top">
|
|
||||||
<view class="z-bootm-img1" @click="returnbom()">
|
|
||||||
<image src="@/static/icon/fb1.png" mode="aspectFit"></image>
|
|
||||||
</view>
|
|
||||||
<view class="z-bootm-l"></view>
|
|
||||||
<view class="z-bootm-img2" @click="returnbom()">
|
|
||||||
<image src="@/static/icon/fb2.png" mode="aspectFit"></image>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
returnbom() {
|
|
||||||
uni.sendHostEvent('closeApp', (ret) => {
|
|
||||||
//发送消息成功回调
|
|
||||||
console.log('关闭应用' + JSON.stringify(ret));
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.contentgb {
|
|
||||||
|
|
||||||
width: 166rpx;
|
|
||||||
height: 56rpx;
|
|
||||||
|
|
||||||
.return_top {
|
|
||||||
width: 166rpx;
|
|
||||||
height: 56rpx;
|
|
||||||
background: rgba(255, 255, 255, 0.6);
|
|
||||||
border-radius: 44rpx 44rpx;
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.z-bootm-img1 {
|
|
||||||
width: 41rpx;
|
|
||||||
height: 13rpx;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
top: 20rpx;
|
|
||||||
left: 25rpx;
|
|
||||||
|
|
||||||
image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.z-bootm-l {
|
|
||||||
width: 1px;
|
|
||||||
height: 32rpx;
|
|
||||||
background: rgba(0, 0, 0, 0.2);
|
|
||||||
margin: auto 0;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
top: 10rpx;
|
|
||||||
left: 85rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.z-bootm-img2 {
|
|
||||||
width: 38rpx;
|
|
||||||
height: 34rpx;
|
|
||||||
margin-top: -15rpx;
|
|
||||||
margin-left: -15rpx;
|
|
||||||
position: absolute;
|
|
||||||
right: 25rpx;
|
|
||||||
top: 25rpx;
|
|
||||||
|
|
||||||
image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name" : "养殖分析",
|
"name" : "农业咨询",
|
||||||
"appid" : "__UNI__EEA7DC9",
|
"appid" : "__UNI__9620511",
|
||||||
"description" : "",
|
"description" : "",
|
||||||
"versionName" : "1.0.0",
|
"versionName" : "1.0.0",
|
||||||
"versionCode" : "100",
|
"versionCode" : "100",
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
{
|
{
|
||||||
"path": "pages/index/index",
|
"path": "pages/index/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "种植分析",
|
"navigationBarTitleText": "农业咨询",
|
||||||
"navigationStyle": "custom",
|
"navigationStyle": "custom",
|
||||||
"bounce": "none"
|
"bounce": "none"
|
||||||
// "softinputMode": "adjustResize"
|
// "softinputMode": "adjustResize"
|
||||||
|
|
|
||||||
|
|
@ -5,10 +5,9 @@
|
||||||
<view class="conten-top">
|
<view class="conten-top">
|
||||||
<view class="" style="position: absolute;left: 30rpx;"><i class="iconfont icon-xiangzuo"
|
<view class="" style="position: absolute;left: 30rpx;"><i class="iconfont icon-xiangzuo"
|
||||||
style="font-size: 40rpx;text-align: left;"></i></view>
|
style="font-size: 40rpx;text-align: left;"></i></view>
|
||||||
<view class="" style="font-size: 30rpx;margin-top: 10rpx;">
|
<view class="" style="font-size: 30rpx;">
|
||||||
养殖咨询
|
农业咨询
|
||||||
</view>
|
</view>
|
||||||
<returntop class="container-retun"/>
|
|
||||||
</view>
|
</view>
|
||||||
<view style="padding-top:var(--status-bar-height);padding-bottom: 30rpx; margin-bottom: 30rpx;"></view>
|
<view style="padding-top:var(--status-bar-height);padding-bottom: 30rpx; margin-bottom: 30rpx;"></view>
|
||||||
|
|
||||||
|
|
@ -23,18 +22,17 @@
|
||||||
您好！
|
您好！
|
||||||
</view>
|
</view>
|
||||||
<view class="talk-list-con-title1">
|
<view class="talk-list-con-title1">
|
||||||
您可以和我说任何有关养殖的问题。<br />
|
您可以和我说任何有关农业的问题。<br />
|
||||||
例如下面的问题，赶快试试吧！
|
例如下面的问题，赶快试试吧！
|
||||||
</view>
|
</view>
|
||||||
<view class="talk-list-con-title2">
|
<view class="talk-list-con-title2">
|
||||||
<text style="margin-top: 15rpx;"> 下方输入：</text>
|
<text style="margin-top: 15rpx;"> 下方输入：</text>
|
||||||
<view class="" @click="sendDetail('怎么养猪')">
|
<view class="" @click="sendDetail('冬季怎么保存蔬菜')">
|
||||||
怎么养猪
|
冬季怎么保存蔬菜
|
||||||
<image src="../../static/icon/airight.png" mode=""></image>
|
<image src="../../static/icon/airight.png" mode=""></image>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
<view v-for="(item,index) in talkList" :key="index" :id="`msg-${item.id}`">
|
<view v-for="(item,index) in talkList" :key="index" :id="`msg-${item.id}`">
|
||||||
<view class="item flex_col" :class="item.type == 1 ? 'push':'pull' ">
|
<view class="item flex_col" :class="item.type == 1 ? 'push':'pull' ">
|
||||||
|
|
@ -51,10 +49,8 @@
|
||||||
<view class="" v-else>
|
<view class="" v-else>
|
||||||
<view v-if="talkList.length-1==index" class="multiline-text">
|
<view v-if="talkList.length-1==index" class="multiline-text">
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<view class="" v-if="item.type==3"
|
<view class="" v-if="item.type==3" style="border: 1px solid #2573fb;margin-left: 20rpx;">
|
||||||
style="border: 1px solid #2573fb;margin-left: 20rpx;">
|
<image :src="item.Image" mode="" style="width: 200rpx;height: 200rpx;" @click="previewImage(item.Image)"></image>
|
||||||
<image :src="item.Image" mode="" style="width: 200rpx;height: 200rpx;"
|
|
||||||
@click="previewImage(item.Image)"></image>
|
|
||||||
<view class="">{{c_content}}</view>
|
<view class="">{{c_content}}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="" v-else>
|
<view class="" v-else>
|
||||||
|
|
@ -93,10 +89,8 @@
|
||||||
|
|
||||||
|
|
||||||
<!-- <rich-text :nodes="item.content"></rich-text> -->
|
<!-- <rich-text :nodes="item.content"></rich-text> -->
|
||||||
<view class="" v-if="item.type==3"
|
<view class="" v-if="item.type==3" style="border: 1px solid #2573fb;margin-left: 20rpx;">
|
||||||
style="border: 1px solid #2573fb;margin-left: 20rpx;">
|
<image :src="item.Image" mode="" style="width: 200rpx;height: 200rpx;" @click="previewImage(item.Image)"></image>
|
||||||
<image :src="item.Image" mode="" style="width: 200rpx;height: 200rpx;"
|
|
||||||
@click="previewImage(item.Image)"></image>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="" v-else>
|
<view class="" v-else>
|
||||||
<view class="content multiline-text">
|
<view class="content multiline-text">
|
||||||
|
|
@ -252,7 +246,7 @@
|
||||||
import BingMath from "@/components/bing-math/bing-math.vue"
|
import BingMath from "@/components/bing-math/bing-math.vue"
|
||||||
import qiqbshare from "@/components/qiqb-share/qiqb-share.vue"
|
import qiqbshare from "@/components/qiqb-share/qiqb-share.vue"
|
||||||
|
|
||||||
import returntop from '@/components/content-top/index.vue'
|
|
||||||
const recorderManager = uni.getRecorderManager()
|
const recorderManager = uni.getRecorderManager()
|
||||||
const innerAudioContext = uni.createInnerAudioContext()
|
const innerAudioContext = uni.createInnerAudioContext()
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -260,12 +254,12 @@ import returntop from '@/components/content-top/index.vue'
|
||||||
'bing-math': BingMath,
|
'bing-math': BingMath,
|
||||||
'qiqbshare': qiqbshare,
|
'qiqbshare': qiqbshare,
|
||||||
|
|
||||||
returntop
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
wssType: 'yangzhi', // 网络连接类型
|
wssType: 'nongye', // 网络连接类型
|
||||||
avatarType: "/static/icon/yz.png", // AI头像类型
|
avatarType: "/static/icon/ny.png", // AI头像类型
|
||||||
talkList: [],
|
talkList: [],
|
||||||
ajax: {
|
ajax: {
|
||||||
rows: 15, //每页数量
|
rows: 15, //每页数量
|
||||||
|
|
@ -1607,16 +1601,8 @@ import returntop from '@/components/content-top/index.vue'
|
||||||
top: 0;
|
top: 0;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
.container-retun{
|
|
||||||
position: absolute;
|
|
||||||
right: 20rpx;
|
|
||||||
padding-top: var(--status-bar-height);
|
|
||||||
top: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.popup_box {
|
.popup_box {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,168 @@
|
||||||
|
.h1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
.voice-box {
|
||||||
|
box-sizing : border-box;
|
||||||
|
display : flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin : 50px auto;
|
||||||
|
padding : 50px;
|
||||||
|
width : 60%;
|
||||||
|
|
||||||
|
border-radius : 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.voice-box input {
|
||||||
|
box-sizing : border-box;
|
||||||
|
padding : 10px;
|
||||||
|
width : 70%;
|
||||||
|
height : 50px;
|
||||||
|
font-size : 18px;
|
||||||
|
color : #187cff;
|
||||||
|
border : 1px solid #187cff;
|
||||||
|
border-radius: 3px 0px 0px 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.voice-box button {
|
||||||
|
width : 30%;
|
||||||
|
height : 50px;
|
||||||
|
line-height : 50px;
|
||||||
|
font-size : 18px;
|
||||||
|
color : white;
|
||||||
|
background : #187cff;
|
||||||
|
border : none;
|
||||||
|
border-radius: 0px 3px 3px 0px;
|
||||||
|
cursor : pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.voice-box button::before {
|
||||||
|
content : "";
|
||||||
|
display : inline-block;
|
||||||
|
width : 23px;
|
||||||
|
height : 26px;
|
||||||
|
vertical-align : middle;
|
||||||
|
background : url(../img/voice.png) no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-box {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display : none;
|
||||||
|
position : fixed;
|
||||||
|
top : 0px;
|
||||||
|
right : 0px;
|
||||||
|
bottom : 0px;
|
||||||
|
left : 0px;
|
||||||
|
border : .04rem solid #e0e7ff;
|
||||||
|
background: rgba(16, 22, 62, .2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-close {
|
||||||
|
position : absolute;
|
||||||
|
top : 0px;
|
||||||
|
right : 0px;
|
||||||
|
padding : 24px;
|
||||||
|
width : 20px;
|
||||||
|
height : 20px;
|
||||||
|
border : none;
|
||||||
|
background : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABeklEQVRIibXWsWoVQRQA0LObgGCTFFr6env9h/yETSz0tclrBEUJWhjzAqkV/A9/QrC2CtgIYqk2DwvdMExm991ZJrdaZoY53Bnm3u0Wy80BPuI21jjRPjqc4il+4FG3WG4ucS9ZtMaqMfoej5OxLz3uZAuPcXaDKNzt/TuCPFrgYyi87fEK543xKfQFLvoEaYVvQ19DnwxO4euWaA5P4UcBPIzCbmHRcYLleDqfox9wGEG5nnGKRzOvRilnnOIDluPD/BT6HG/GNp+CI/j+HDQCR/BqlPE7LuGlO5+F1sARPIzWwh32Jub3K/YKw1PFYYgV3rWEI2iKh2r7NnhbGZzdWKaeU03tzZ/W8ARH/2TGMq5BZ7XUElzVZebiOTzU3ho0RUqts4in8Kwuk8Uqig/wti4TQSP41XgfQMNlMIBf9fPd/x8t0RTn+h/LEX52i+XmN241RtM4K+Dfe3y7QZTysV/u7D18+RkP8AfPxPpubXzCL9zHVzz5C8ecbD1n3xuUAAAAAElFTkSuQmCC) no-repeat center center;
|
||||||
|
background-size: 20px;
|
||||||
|
transition : all .5s;
|
||||||
|
cursor : pointer;
|
||||||
|
outline : none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-close:hover {
|
||||||
|
transform : rotate(270deg);
|
||||||
|
-webkit-transform: rotate(270deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.fixed-main {
|
||||||
|
box-sizing : border-box;
|
||||||
|
position : absolute;
|
||||||
|
left : 20%;
|
||||||
|
bottom : 0px;
|
||||||
|
padding : 30px;
|
||||||
|
width : 60%;
|
||||||
|
height : 240px;
|
||||||
|
font-size : 18px;
|
||||||
|
background : white;
|
||||||
|
border : 2px solid #e0e7ff;
|
||||||
|
border-radius: 5px 5px 0px 0px;
|
||||||
|
overflow-y : auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-icon {
|
||||||
|
box-sizing : border-box;
|
||||||
|
display : flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items : center;
|
||||||
|
position : absolute;
|
||||||
|
top : 50%;
|
||||||
|
left : 50%;
|
||||||
|
margin-top : -50px;
|
||||||
|
margin-left : -50px;
|
||||||
|
width : 100px;
|
||||||
|
height : 100px;
|
||||||
|
background : linear-gradient(115deg, #56d8e4 5%, #9f01ea 95%);
|
||||||
|
border : 1px solid #e0e7ff;
|
||||||
|
border-radius : 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-icon::before {
|
||||||
|
content : "";
|
||||||
|
position : absolute;
|
||||||
|
display : inline-block;
|
||||||
|
width : 100px;
|
||||||
|
height : 100px;
|
||||||
|
border : 1px solid #9f01ea;
|
||||||
|
box-shadow : 0px 0px 6px 0px #9f01ea;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation : move 1.5s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-icon::after {
|
||||||
|
content : "";
|
||||||
|
position : absolute;
|
||||||
|
display : inline-block;
|
||||||
|
width : 100px;
|
||||||
|
height : 100px;
|
||||||
|
border : 1px solid #56d8e4;
|
||||||
|
box-shadow : 0px 0px 6px 0px #56d8e4;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation : move 1.5s .5s infinite;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-icon img {
|
||||||
|
width : 30px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes move {
|
||||||
|
0% {
|
||||||
|
opacity : 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity : 0;
|
||||||
|
transform: scale(2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width : 6px;
|
||||||
|
height : 6px;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
border-radius : 6px;
|
||||||
|
background-color: #187cff;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -0,0 +1,107 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum=1.0, user-scalable=no shrink-to-fit=no" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||||
|
<link rel="stylesheet" href="./css/base.css" />
|
||||||
|
<!-- <script async src="https://hm.baidu.com/hm.js?85fad12bb9a6dab448f4eff0a19299a5"></script> -->
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="voice-box">
|
||||||
|
<input type="search" name="voice" id="voice-txt" />
|
||||||
|
<button id="start-btn">开始识别</button>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="fixed-box" id="fixed-box">
|
||||||
|
<div class="fixed-main">
|
||||||
|
<button class="fixed-close" id="close-btn"></button>
|
||||||
|
<div id="fixed-txt">Hello! 请说出你想说话。。。！</div>
|
||||||
|
<div class="fixed-icon">
|
||||||
|
<img src="./img/voice.png" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
|
||||||
|
</script>
|
||||||
|
<script src="./js/crypto-js.min.js"></script>
|
||||||
|
<script src="./js/voice.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
window.onload = function() {
|
||||||
|
const voiceTxt = document.querySelector('#voice-txt');
|
||||||
|
const startBtn = document.querySelector('#start-btn');
|
||||||
|
const fixedBox = document.querySelector('#fixed-box');
|
||||||
|
const fixedTxt = document.querySelector('#fixed-txt');
|
||||||
|
const closeBtn = document.querySelector('#close-btn');
|
||||||
|
let times = null;
|
||||||
|
|
||||||
|
|
||||||
|
// 实例化迅飞语音听写（流式版）WebAPI
|
||||||
|
const voice = new Voice({
|
||||||
|
|
||||||
|
// 服务接口认证信息 注：apiKey 和 apiSecret 的长度都差不多，请要填错哦，！
|
||||||
|
appId: '2eda6c2e',
|
||||||
|
apiSecret: 'MDEyMzE5YTc5YmQ5NjMwOTU1MWY4N2Y2',
|
||||||
|
apiKey: '12ec1f9d113932575fc4b114a2f60ffd',
|
||||||
|
// 注：要获取以上3个参数，请到迅飞开放平台：https://www.xfyun.cn/services/voicedictation 【注：这是我的迅飞语音听写（流式版）每天服务量500（也就是调500次），如果你需求里大请购买服务量：https://www.xfyun.cn/services/voicedictation?target=price】
|
||||||
|
|
||||||
|
onWillStatusChange: function(oldStatus, newStatus) {
|
||||||
|
//可以在这里进行页面中一些交互逻辑处理：注：倒计时（语音听写只有60s）,录音的动画，按钮交互等！
|
||||||
|
fixedBox.style.display = 'block';
|
||||||
|
},
|
||||||
|
onTextChange: function(text) {
|
||||||
|
//监听识别结果的变化
|
||||||
|
voiceTxt.value = text;
|
||||||
|
fixedTxt.innerText = text;
|
||||||
|
console.log(text,'11111')
|
||||||
|
// 3秒钟内没有说话，就自动关闭
|
||||||
|
if (text) {
|
||||||
|
setTimeout(() => {
|
||||||
|
voice.stop();
|
||||||
|
uni.postMessage({
|
||||||
|
data: text
|
||||||
|
});
|
||||||
|
fixedBox.style.display = 'none';
|
||||||
|
}, 3000);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
addUniEvenPassthrough()
|
||||||
|
addcloEvenPassthrough()
|
||||||
|
|
||||||
|
function addUniEvenPassthrough() {
|
||||||
|
window.uniEvent = function(info) {
|
||||||
|
console.log('addUniEvenPassthrough')
|
||||||
|
voice.start();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function addcloEvenPassthrough() {
|
||||||
|
window.closeEvent = function(info) {
|
||||||
|
console.log('addcloEvenPassthrough')
|
||||||
|
voice.stop();
|
||||||
|
fixedBox.style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 开始识别
|
||||||
|
startBtn['onclick'] = function() {
|
||||||
|
voice.start();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 关闭识别
|
||||||
|
closeBtn['onclick'] = function() {
|
||||||
|
voice.stop();
|
||||||
|
fixedBox.style.display = 'none';
|
||||||
|
};
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,48 @@
|
||||||
|
;(function () {
|
||||||
|
let self = this
|
||||||
|
self.onmessage = function (e) {
|
||||||
|
transAudioData.transcode(e.data)
|
||||||
|
}
|
||||||
|
|
||||||
|
let transAudioData = {
|
||||||
|
transcode(audioData) {
|
||||||
|
|
||||||
|
let output = transAudioData.to16kHz(audioData)
|
||||||
|
output = transAudioData.to16BitPCM(output)
|
||||||
|
output = Array.from(new Uint8Array(output.buffer))
|
||||||
|
self.postMessage(output)
|
||||||
|
// return output
|
||||||
|
},
|
||||||
|
|
||||||
|
to16kHz(audioData) {
|
||||||
|
var data = new Float32Array(audioData)
|
||||||
|
var fitCount = Math.round(data.length * (16000 / 44100))
|
||||||
|
var newData = new Float32Array(fitCount)
|
||||||
|
var springFactor = (data.length - 1) / (fitCount - 1)
|
||||||
|
newData[0] = data[0]
|
||||||
|
for (let i = 1; i < fitCount - 1; i++) {
|
||||||
|
var tmp = i * springFactor
|
||||||
|
var before = Math.floor(tmp).toFixed()
|
||||||
|
var after = Math.ceil(tmp).toFixed()
|
||||||
|
var atPoint = tmp - before
|
||||||
|
newData[i] = data[before] + (data[after] - data[before]) * atPoint
|
||||||
|
}
|
||||||
|
newData[fitCount - 1] = data[data.length - 1]
|
||||||
|
return newData
|
||||||
|
},
|
||||||
|
|
||||||
|
to16BitPCM(input) {
|
||||||
|
var dataLength = input.length * (16 / 8)
|
||||||
|
var dataBuffer = new ArrayBuffer(dataLength)
|
||||||
|
var dataView = new DataView(dataBuffer)
|
||||||
|
var offset = 0
|
||||||
|
for (var i = 0; i < input.length; i++, offset += 2) {
|
||||||
|
var s = Math.max(-1, Math.min(1, input[i]))
|
||||||
|
dataView.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7fff, true)
|
||||||
|
}
|
||||||
|
return dataView
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
@ -0,0 +1,357 @@
|
||||||
|
; (function (window, voice) {
|
||||||
|
"use strict";
|
||||||
|
if (typeof define === 'function' && define.amd) {
|
||||||
|
define(voice);
|
||||||
|
} else if (typeof exports === 'object') {
|
||||||
|
module.exports = voice();
|
||||||
|
} else {
|
||||||
|
window.Voice = voice();
|
||||||
|
};
|
||||||
|
}(typeof window !== "undefined" ? window : this, () => {
|
||||||
|
"use strict";
|
||||||
|
return class IatRecorder {
|
||||||
|
constructor(opts = {}) {
|
||||||
|
// 服务接口认证信息(语音听写（流式版）WebAPI)
|
||||||
|
this.appId = opts.appId || '';
|
||||||
|
this.apiKey = opts.apiKey || '';
|
||||||
|
this.apiSecret = opts.apiSecret || '';
|
||||||
|
// 识别监听方法
|
||||||
|
this.onTextChange = opts.onTextChange || Function();
|
||||||
|
this.onWillStatusChange = opts.onWillStatusChange || Function();
|
||||||
|
// 方言/语种
|
||||||
|
this.status = 'null'
|
||||||
|
this.language = opts.language || 'zh_cn'
|
||||||
|
this.accent = opts.accent || 'mandarin';
|
||||||
|
// 流媒体
|
||||||
|
this.streamRef = [];
|
||||||
|
// 记录音频数据
|
||||||
|
this.audioData = [];
|
||||||
|
// 记录听写结果
|
||||||
|
this.resultText = '';
|
||||||
|
// wpgs下的听写结果需要中间状态辅助记录
|
||||||
|
this.resultTextTemp = '';
|
||||||
|
// 音频数据多线程
|
||||||
|
this.init();
|
||||||
|
};
|
||||||
|
// WebSocket请求地址鉴权
|
||||||
|
getWebSocketUrl() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
// 请求地址根据语种不同变化
|
||||||
|
try {
|
||||||
|
const CryptoJS = require('crypto-js');
|
||||||
|
let url = 'wss://iat-api.xfyun.cn/v2/iat',
|
||||||
|
host = 'iat-api.xfyun.cn',
|
||||||
|
date = new Date().toGMTString(),
|
||||||
|
algorithm = 'hmac-sha256',
|
||||||
|
headers = 'host date request-line',
|
||||||
|
signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2/iat HTTP/1.1`,
|
||||||
|
signatureSha = CryptoJS.HmacSHA256(signatureOrigin, this.apiSecret),
|
||||||
|
signature = CryptoJS.enc.Base64.stringify(signatureSha),
|
||||||
|
authorizationOrigin = `api_key="${this.apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`,
|
||||||
|
authorization = btoa(authorizationOrigin);
|
||||||
|
resolve(`${url}?authorization=${authorization}&date=${date}&host=${host}`);
|
||||||
|
} catch (error) {
|
||||||
|
let url = 'wss://iat-api.xfyun.cn/v2/iat',
|
||||||
|
host = 'iat-api.xfyun.cn',
|
||||||
|
date = new Date().toGMTString(),
|
||||||
|
algorithm = 'hmac-sha256',
|
||||||
|
headers = 'host date request-line',
|
||||||
|
signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2/iat HTTP/1.1`,
|
||||||
|
signatureSha = CryptoJS.HmacSHA256(signatureOrigin, this.apiSecret),
|
||||||
|
signature = CryptoJS.enc.Base64.stringify(signatureSha),
|
||||||
|
authorizationOrigin = `api_key="${this.apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`,
|
||||||
|
authorization = btoa(authorizationOrigin);
|
||||||
|
resolve(`${url}?authorization=${authorization}&date=${date}&host=${host}`);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 操作初始化
|
||||||
|
init() {
|
||||||
|
const self = this;
|
||||||
|
try {
|
||||||
|
if (!self.appId || !self.apiKey || !self.apiSecret) {
|
||||||
|
alert('请正确配置【迅飞语音听写（流式版）WebAPI】服务接口认证信息！');
|
||||||
|
} else {
|
||||||
|
self.webWorker = new Worker('./js/transcode.worker.js');
|
||||||
|
self.webWorker.onmessage = function (event) {
|
||||||
|
|
||||||
|
self.audioData.push(...event.data);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
alert('对不起：请在服务器环境下运行！');
|
||||||
|
console.error('请在服务器如：WAMP、XAMPP、Phpstudy、http-server、WebServer等环境中运行！', error);
|
||||||
|
};
|
||||||
|
console.log("%c ❤️使用说明：http://www.muguilin.com/blog/info/609bafc50d572b3fd79b058f", "font-size:32px; color:blue; font-weight: bold;");
|
||||||
|
};
|
||||||
|
// 修改录音听写状态
|
||||||
|
setStatus(status) {
|
||||||
|
this.onWillStatusChange && this.status !== status && this.onWillStatusChange(this.status, status);
|
||||||
|
this.status = status;
|
||||||
|
};
|
||||||
|
// 设置识别结果内容
|
||||||
|
setResultText({ resultText, resultTextTemp } = {}) {
|
||||||
|
this.onTextChange && this.onTextChange(resultTextTemp || resultText || '');
|
||||||
|
resultText !== undefined && (this.resultText = resultText);
|
||||||
|
resultTextTemp !== undefined && (this.resultTextTemp = resultTextTemp);
|
||||||
|
};
|
||||||
|
// 修改听写参数
|
||||||
|
setParams({ language, accent } = {}) {
|
||||||
|
language && (this.language = language)
|
||||||
|
accent && (this.accent = accent)
|
||||||
|
};
|
||||||
|
// 对处理后的音频数据进行base64编码，
|
||||||
|
toBase64(buffer) {
|
||||||
|
let binary = '';
|
||||||
|
let bytes = new Uint8Array(buffer);
|
||||||
|
for (let i = 0; i < bytes.byteLength; i++) {
|
||||||
|
binary += String.fromCharCode(bytes[i]);
|
||||||
|
}
|
||||||
|
return window.btoa(binary);
|
||||||
|
};
|
||||||
|
// 连接WebSocket
|
||||||
|
connectWebSocket() {
|
||||||
|
return this.getWebSocketUrl().then(url => {
|
||||||
|
let iatWS;
|
||||||
|
if ('WebSocket' in window) {
|
||||||
|
iatWS = new WebSocket(url);
|
||||||
|
} else if ('MozWebSocket' in window) {
|
||||||
|
iatWS = new MozWebSocket(url);
|
||||||
|
} else {
|
||||||
|
alert('浏览器不支持WebSocket!');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
this.webSocket = iatWS;
|
||||||
|
this.setStatus('init');
|
||||||
|
iatWS.onopen = e => {
|
||||||
|
this.setStatus('ing');
|
||||||
|
console.log('连接成功')
|
||||||
|
// 重新开始录音
|
||||||
|
setTimeout(() => {
|
||||||
|
this.webSocketSend();
|
||||||
|
}, 500);
|
||||||
|
};
|
||||||
|
iatWS.onmessage = e => {
|
||||||
|
this.webSocketRes(e.data);
|
||||||
|
};
|
||||||
|
iatWS.onerror = e => {
|
||||||
|
this.recorderStop(e);
|
||||||
|
};
|
||||||
|
iatWS.onclose = e => {
|
||||||
|
this.recorderStop(e);
|
||||||
|
};
|
||||||
|
})
|
||||||
|
};
|
||||||
|
// 初始化浏览器录音
|
||||||
|
recorderInit() {
|
||||||
|
// 创建音频环境
|
||||||
|
try {
|
||||||
|
this.audioContext = this.audioContext ? this.audioContext : new (window.AudioContext || window.webkitAudioContext)();
|
||||||
|
this.audioContext.resume();
|
||||||
|
if (!this.audioContext) {
|
||||||
|
alert('浏览器不支持webAudioApi相关接口');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
if (!this.audioContext) {
|
||||||
|
alert('浏览器不支持webAudioApi相关接口');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 获取浏览器录音权限成功时回调
|
||||||
|
let getMediaSuccess = _ => {
|
||||||
|
// 创建一个用于通过JavaScript直接处理音频
|
||||||
|
this.scriptProcessor = this.audioContext.createScriptProcessor(0, 1, 1);
|
||||||
|
this.scriptProcessor.onaudioprocess = e => {
|
||||||
|
if (this.status === 'ing') {
|
||||||
|
// 多线程音频数据处理
|
||||||
|
try {
|
||||||
|
this.webWorker.postMessage(e.inputBuffer.getChannelData(0));
|
||||||
|
} catch (error) { }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 创建一个新的MediaStreamAudioSourceNode 对象，使来自MediaStream的音频可以被播放和操作
|
||||||
|
this.mediaSource = this.audioContext.createMediaStreamSource(this.streamRef);
|
||||||
|
this.mediaSource.connect(this.scriptProcessor);
|
||||||
|
this.scriptProcessor.connect(this.audioContext.destination);
|
||||||
|
this.connectWebSocket();
|
||||||
|
};
|
||||||
|
// 获取浏览器录音权限失败时回调
|
||||||
|
let getMediaFail = (e) => {
|
||||||
|
alert('对不起：录音权限获取失败!');
|
||||||
|
this.audioContext && this.audioContext.close();
|
||||||
|
this.audioContext = undefined;
|
||||||
|
// 关闭websocket
|
||||||
|
if (this.webSocket && this.webSocket.readyState === 1) {
|
||||||
|
this.webSocket.close();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
|
||||||
|
// 获取浏览器录音权限
|
||||||
|
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
|
||||||
|
navigator.mediaDevices.getUserMedia({
|
||||||
|
audio: true
|
||||||
|
}).then(stream => {
|
||||||
|
this.streamRef = stream;
|
||||||
|
getMediaSuccess();
|
||||||
|
}).catch(e => {
|
||||||
|
getMediaFail(e);
|
||||||
|
})
|
||||||
|
} else if (navigator.getUserMedia) {
|
||||||
|
navigator.getUserMedia({
|
||||||
|
audio: true
|
||||||
|
}, (stream) => {
|
||||||
|
this.streamRef = stream;
|
||||||
|
getMediaSuccess();
|
||||||
|
}, function (e) {
|
||||||
|
getMediaFail(e);
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
if (navigator.userAgent.toLowerCase().match(/chrome/) && location.origin.indexOf('https://') < 0) {
|
||||||
|
console.error('获取浏览器录音功能，因安全性问题，需要在localhost 或 127.0.0.1 或 https 下才能获取权限！');
|
||||||
|
} else {
|
||||||
|
alert('对不起：未识别到录音设备!');
|
||||||
|
}
|
||||||
|
this.audioContext && this.audioContext.close();
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
// 向webSocket发送数据(音频二进制数据经过Base64处理)
|
||||||
|
webSocketSend() {
|
||||||
|
if (this.webSocket.readyState !== 1) return false;
|
||||||
|
|
||||||
|
// 音频数据
|
||||||
|
const audioData = this.audioData.splice(0, 1280);
|
||||||
|
const params = {
|
||||||
|
common: {
|
||||||
|
app_id: this.appId,
|
||||||
|
},
|
||||||
|
business: {
|
||||||
|
language: this.language, //小语种可在控制台--语音听写（流式）--方言/语种处添加试用
|
||||||
|
domain: 'iat',
|
||||||
|
accent: this.accent, //中文方言可在控制台--语音听写（流式）--方言/语种处添加试用
|
||||||
|
vad_eos: 5000,
|
||||||
|
dwa: 'wpgs' //为使该功能生效，需到控制台开通动态修正功能（该功能免费）
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
status: 0,
|
||||||
|
format: 'audio/L16;rate=16000',
|
||||||
|
encoding: 'raw',
|
||||||
|
audio: this.toBase64(audioData)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 发送数据
|
||||||
|
this.webSocket.send(JSON.stringify(params));
|
||||||
|
this.handlerInterval = setInterval(() => {
|
||||||
|
// websocket未连接
|
||||||
|
if (this.webSocket.readyState !== 1) {
|
||||||
|
this.audioData = [];
|
||||||
|
clearInterval(this.handlerInterval);
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
if (this.audioData.length === 0) {
|
||||||
|
if (this.status === 'end') {
|
||||||
|
this.webSocket.send(
|
||||||
|
JSON.stringify({
|
||||||
|
data: {
|
||||||
|
status: 2,
|
||||||
|
format: 'audio/L16;rate=16000',
|
||||||
|
encoding: 'raw',
|
||||||
|
audio: ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
this.audioData = [];
|
||||||
|
clearInterval(this.handlerInterval);
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 中间帧
|
||||||
|
this.webSocket.send(
|
||||||
|
JSON.stringify({
|
||||||
|
data: {
|
||||||
|
status: 1,
|
||||||
|
format: 'audio/L16;rate=16000',
|
||||||
|
encoding: 'raw',
|
||||||
|
audio: this.toBase64(this.audioData.splice(0, 1280))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}, 40);
|
||||||
|
};
|
||||||
|
// 识别结束 webSocket返回数据
|
||||||
|
webSocketRes(resultData) {
|
||||||
|
|
||||||
|
let jsonData = JSON.parse(resultData);
|
||||||
|
console.log(JSON.stringify( jsonData))
|
||||||
|
if (jsonData.data && jsonData.data.result) {
|
||||||
|
let data = jsonData.data.result;
|
||||||
|
let str = '';
|
||||||
|
let ws = data.ws;
|
||||||
|
for (let i = 0; i < ws.length; i++) {
|
||||||
|
str = str + ws[i].cw[0].w;
|
||||||
|
}
|
||||||
|
// 开启wpgs会有此字段(前提：在控制台开通动态修正功能)
|
||||||
|
// 取值为 "apd"时表示该片结果是追加到前面的最终结果；取值为"rpl" 时表示替换前面的部分结果，替换范围为rg字段
|
||||||
|
if (data.pgs) {
|
||||||
|
if (data.pgs === 'apd') {
|
||||||
|
// 将resultTextTemp同步给resultText
|
||||||
|
this.setResultText({
|
||||||
|
resultText: this.resultTextTemp
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 将结果存储在resultTextTemp中
|
||||||
|
this.setResultText({
|
||||||
|
resultTextTemp: this.resultText + str
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.setResultText({
|
||||||
|
resultText: this.resultText + str
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (jsonData.code === 0 && jsonData.data.status === 2) {
|
||||||
|
this.webSocket.close();
|
||||||
|
|
||||||
|
}
|
||||||
|
if (jsonData.code !== 0) {
|
||||||
|
this.webSocket.close();
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 启动录音
|
||||||
|
recorderStart() {
|
||||||
|
|
||||||
|
if (!this.audioContext) {
|
||||||
|
this.recorderInit();
|
||||||
|
} else {
|
||||||
|
this.audioContext.resume();
|
||||||
|
this.connectWebSocket();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 停止录音
|
||||||
|
recorderStop() {
|
||||||
|
if (!(/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgen))) {
|
||||||
|
// safari下suspend后再次resume录音内容将是空白，设置safari下不做suspend
|
||||||
|
this.audioContext && this.audioContext.suspend();
|
||||||
|
}
|
||||||
|
this.setStatus('end');
|
||||||
|
try {
|
||||||
|
// this.streamRef.getTracks().map(track => track.stop()) || his.streamRef.getAudioTracks()[0].stop();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('暂停失败!');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 开始
|
||||||
|
start() {
|
||||||
|
console.log('startstartstartstartstartstart');
|
||||||
|
this.recorderStart();
|
||||||
|
this.setResultText({ resultText: '', resultTextTemp: '' });
|
||||||
|
};
|
||||||
|
// 停止
|
||||||
|
stop() {
|
||||||
|
this.recorderStop();
|
||||||
|
};
|
||||||
|
};
|
||||||
|
}));
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 446 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Loading…
Reference in New Issue