wms_pda/pages/sample/tts.vue

<template>
	<view class="content">
		<view>{{isReady ? 'TTS初始化完成' : '正在初始化...'}}</view>

		<!-- 已安装的TTS引擎列表 -->


		<!-- 语调 & 语速 & 合成文本 -->
		<view style="width: 700rpx;">
			<view class="uni-form-item uni-column">
				<view class="title">已安装的TTS引擎列表: </view>
				<radio-group name="radio" @change="onRadioChange">
					<label v-for="(item, index) in ttsList" :key="item.value">
						<radio :value="item.value" :checked="ttsName === item.value" />
						<text>{{item.name}}</text>
					</label>
				</radio-group>
			</view>
			<view style="height: 10rpx;"></view>
			<view class="uni-form-item uni-column">
				<view class="title">语调: </view>
				<slider max="100" min="0" :value="pitch" @change="onPicthChange" show-value></slider>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">语速: </view>
				<slider max="100" min="0" :value="speed" @change="onSpeedChange" show-value></slider>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">合成文本: </view>
				<input class="uni-input" v-model="text" />
			</view>
		</view>
		<view style="height: 20rpx;"></view>

		<!-- 引擎设置 -->
		<!-- 播放 -->
		<view style="display: flex;">
			<button class="title" size="mini" @click="showToast">Toast</button>
			<view style="width: 10rpx;"></view>
			<button class="title" size="mini" @click="init">Init TTS</button>
			<view style="width: 10rpx;"></view>
			<button class="title" size="mini" @click="getInstallTTS">获取已安装的TTS</button>
			<view style="width: 10rpx;"></view>
			<button class="title" size="mini" @click="play">播放</button>
			<view style="width: 10rpx;"></view>
			<button class="title" size="mini" @click="toTestBaidu">测试百度TTS</button>
		</view>
	</view>
</template>

<script>
	const SpeechTTS = uni.requireNativePlugin('MT-TTS-Speech');

	export default {
		data() {
			return {
				ttsList: [],
				isReady: false,
				pitch: 70,
				speed: 65,
				ttsName: '',
				text: '请。112号、张三，到，ABC、检查'
			}
		},
		onLoad() {},
		onUnload() {
			SpeechTTS.destroy();
		},
		methods: {
			toTestBaidu() {
				uni.redirectTo({
					url: '/pages/baidu/baidu'
				})
			},
			showToast() {
				SpeechTTS.toast('toast test');
			},
			onPicthChange(e) {
				console.log('>> onPicthChange')
				this.picth = e.detail.value;
			},
			onSpeedChange(e) {
				console.log('>> onSpeedChange')
				this.speed = e.detail.value;
			},
			onRadioChange(e) {
				console.log("e.target.value",e.target.value)
				this.ttsName = e.target.value;
				console.log('>> set Engine:' + this.ttsName);
				const res = SpeechTTS.setEngine(this.ttsName);
				console.log('>> set Engine = ' + res);
			},
			init() {
				console.log('>> TTS:init...')
				SpeechTTS.init((callback) => {
					this.isReady = true;
					this.ttsName = "com.google.android.tts"
					 SpeechTTS.setEngine(this.ttsName);
					console.log('>> tts: init success');
				});

				SpeechTTS.onDone((res) => {
					console.log(">> tts: play end " + res)
				});
			},
			play() {
				console.log('>> tts: play...');
				console.log('>> pitch: ' + this.pitch)
				console.log('>> speed: ' + this.speed)
				console.log('>> text: ' + this.text)

				SpeechTTS.setPitch(this.pitch);
				SpeechTTS.setSpeed(this.speed);
				const res = SpeechTTS.speak({
					text: this.text
				});
				console.log('>> tts: play result = ' + res);
			},
			getInstallTTS() {
				console.log('>> 111111111111111tts: getInstallTTS');
				SpeechTTS.getInstallTTS(res => {
					console.log(JSON.stringify(res));
					if (!res || res.length <= 0) {
						console.log('>> tts: TTS Engine not found');
						return
					}

					let list = [];
					res.forEach(v => {
						list.push({
							name: v.label,
							value: v.name,
						});
						console.log(v.label + '： ' + v.name)
					})
					this.ttsList = list;
				})
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tts-item {
		padding-bottom: 5rpx;
		border-bottom: 1px solid #3F536E;
	}
</style>