更新记录

1.0.20260312（2026-03-12）

1. 支持实时语音识别
2. 支持语音合成

平台兼容性

uni-app(4.57)

uni-app x(4.57)

阿里NUI百炼语音

引入插件

• 点击插件试用引入到项目
• 按下方修改Android需要修改的内容
• 打包自定义基座包
• 按照下方示例测试
• 先插件试用，完全符合需求后购买

SDK Version

• Android SDK 2.7.2

useAsr(opt: UseAsrOption):AlibabaAsr 实时语音识别

以下大部分参数都为官方参数可以参考官方文档方便理解， 阿里百炼官方文档说明。

代码示例

import { useAsr } from "@/uni_modules/cms-alibanui";
let asr = useAsr({
    apikey: "< your apikey >",
    model: "fun-asr-realtime",
    onAsrStart() {},
    onAsrOver() {},
    onSpeechResult(obj) {
        console.log('onSpeechResult 识别文本:', obj.payload.output.sentence.text);
    },
    onSpeechParagraphEnd(obj) {
        console.log('onSpeechParagraphEnd 识别文本:', obj.payload.output.sentence.text);
    },
    onSpeechComplete(str) {
        console.log('onSpeechComplete:', str);
    }
})

UseAsrOption

AlibabaAsr 方法

useTts(opt: UseAsrOption):AlibabaTts 实时语音合成

以下大部分参数都为官方参数可以参考官方文档方便理解， 阿里百炼官方文档说明。

代码示例

import { useTts } from "@/uni_modules/cms-alibanui";
let asr = useTts({
    apikey: "< your apikey >",
    model: "cosyvoice-v3-flash",
    voice: "longanlang_v3",
    onPlayStart() {
        console.log('onPlayStart');
    },
    onPlayOver() {
        console.log('onPlayOver');
    },
    onPlaySoundLevel(level) {
        console.log('onPlaySoundLevel', level);
    },
    onPlayInfo(info) {
        console.log('onPlayInfo', info);
    }
})

UseTtsOption

AlibabaTts 方法

<template>
    <view class="container">
        <view class="form-item">
            apiKey：<input class="input" type="text" v-model="apikey" placeholder="请输入API Key" />
        </view>

        <view class="tab_ul">
            <view :class="['tab-item', tabIndex === 0 ? 'active' : '']" @click="tabIndex = 0">语音合成</view>
            <view :class="['tab-item', tabIndex === 1 ? 'active' : '']" @click="tabIndex = 1">语音识别</view>
        </view>

        <block v-if="tabIndex == 0">
            <button :disabled="!!tts" class="btn" @click="initTts" type="primary">初始化TTS</button>

            <view class="form-item">
                <textarea class="textarea" v-model="ttsMsg" placeholder="请输入文本" />
            </view>

            <button class="btn" :disabled="!tts || streamInputTtsState" @click="asyncPlayStreamInputTts"
                type="primary">一次性异步播放</button>
            <button class="btn" :disabled="!tts || streamInputTtsState" @click="playStreamInputTts"
                type="primary">一次性同步播放</button>

            <button class="btn" :disabled="!tts || streamInputTtsState" @click="startStreamInputTts"
                type="primary">流式输入开启</button>
            <view v-if="streamInputTtsState">流式输入开启后在不关闭情况下可以一直点击【流式输入文本】按钮播放</view>
            <button class="btn" :disabled="!tts || !streamInputTtsState" @click="sendStreamInputTts"
                type="primary">流式输入文本</button>
            <button class="btn" :disabled="!tts || !streamInputTtsState" @click="stopStreamInputTts"
                type="primary">同步流式输入停止</button>
            <button class="btn" :disabled="!tts || !streamInputTtsState" @click="asyncStopStreamInputTts"
                type="primary">异步流式输入停止</button>

        </block>

        <block v-if="tabIndex == 1">

            <button :disabled="!!asr" class="btn" @click="initAsr" type="primary">初始化实时ASR</button>
            <button class="btn" :disabled="!asr || isAsrState" @click="startAsr" type="primary">开始实时语音识别</button>
            <button class="btn" :disabled="!asr || !isAsrState " @click="stopAsr" type="primary">结束实时语音识别</button>
            <button class="btn" :disabled="!asr " @click="releaseAsr" type="primary">释放ASR</button>
            <view class="form-item">
                {{asrMsg || "..."}}
            </view>

        </block>
    </view>
</template>

<script setup>
    import {
        ref
    } from "vue";

    const tabIndex = ref(0);
    const apikey = ref("");

    import {
        useAsr
    } from "@/uni_modules/cms-alibanui";
    const asr = ref();
    const asrMsg = ref("");
    const isAsrState = ref(false);

    function initAsr() {
        asr.value = useAsr({
            apikey: apikey.value,
            model: "fun-asr-realtime",
            onAsrStart() {
                console.log('onAsrStart');
            },
            onAsrOver() {
                console.log('onAsrOver');
            },
            onSpeechResult(obj) {
                console.log('onSpeechResult', obj);
                console.log('onSpeechResult 识别文本:', obj.payload.output.sentence.text);
                asrMsg.value = obj.payload.output.sentence.text;
            },
            onSpeechParagraphEnd(obj) {
                console.log('onSpeechParagraphEnd', obj);
                console.log('onSpeechParagraphEnd 识别文本:', obj.payload.output.sentence.text);
                asrMsg.value = obj.payload.output.sentence.text;
            },
            onSpeechComplete(str) {
                console.log('本次语音整体识别到的文本:', str);
                asrMsg.value = str;
            }
        })
    }

    async function startAsr() {
        asrMsg.value = "";
        isAsrState.value = await asr.value.startAsr();
    }

    function stopAsr() {
        asr.value.stopAsr();
        isAsrState.value = false;
    }

    function releaseAsr() {
        asr.value.release();
        asr.value = null;
        isAsrState.value = false;
    }

    import {
        useTts
    } from "@/uni_modules/cms-alibanui";

    const tts = ref();
    const ttsMsg = ref("床前明月光，疑是地上霜。")

    function initTts() {
        tts.value = useTts({
            apikey: apikey.value,
            model: "cosyvoice-v3-flash",
            voice: "longanlang_v3",
            onPlayStart() {
                console.log('onPlayStart');
            },
            onPlayOver() {
                console.log('onPlayOver');
            },
            onPlaySoundLevel(level) {
                console.log('onPlaySoundLevel', level);
            },
            onPlayInfo(info) {
                console.log('onPlayInfo', info);
            }
        });
    }

    function playStreamInputTts() {
        console.log('playStreamInputTts');
        tts.value.playStreamInputTts(ttsMsg.value, "")
    }

    function asyncPlayStreamInputTts() {
        tts.value.asyncPlayStreamInputTts(ttsMsg.value, "")
    }

    const streamInputTtsState = ref(false);

    function startStreamInputTts() {
        streamInputTtsState.value = true;
        tts.value.startStreamInputTts();
    }

    function sendStreamInputTts() {
        tts.value.sendStreamInputTts(ttsMsg.value);
    }

    function stopStreamInputTts() {
        streamInputTtsState.value = false;
        tts.value.stopStreamInputTts();
    }

    function asyncStopStreamInputTts() {
        streamInputTtsState.value = false;
        tts.value.asyncStopStreamInputTts();
    }
</script>

<style scoped lang="scss">
    .container {
        padding: 30rpx;
        background-color: #f5f5f5;
        min-height: 100vh;
    }

    .form-item {
        display: flex;
        align-items: center;
        margin-bottom: 30rpx;
        background-color: #fff;
        padding: 20rpx;
        border-radius: 12rpx;

        input,
        textarea {
            flex: 1;
        }
    }

    .input {
        width: 100%;
        height: 80rpx;
        padding: 0 20rpx;
        border: 1rpx solid #e0e0e0;
        border-radius: 8rpx;
        box-sizing: border-box;
        font-size: 28rpx;
        background-color: #fafafa;
    }

    .textarea {
        width: 100%;
        height: 200rpx;
        padding: 20rpx;
        border: 1rpx solid #e0e0e0;
        border-radius: 8rpx;
        box-sizing: border-box;
        font-size: 28rpx;
        background-color: #fafafa;
    }

    .tab_ul {
        display: flex;
        margin-bottom: 30rpx;
        background-color: #fff;
        border-radius: 12rpx;
        overflow: hidden;

        .tab-item {
            flex: 1;
            text-align: center;
            padding: 30rpx 0;
            font-size: 28rpx;
            color: #666;
            position: relative;
            transition: all 0.3s;

            &:active {
                background-color: #f0f0f0;
            }

            &.active {
                color: #007aff;
                background-color: #f0f8ff;
                font-weight: bold;
            }
        }
    }

    .btn {
        margin-bottom: 20rpx;
        border-radius: 12rpx;
        font-size: 28rpx;
        height: 88rpx;
        line-height: 88rpx;
    }

    .btn[disabled] {
        opacity: 0.5;
    }
</style>