shuhi-app/pages/my/page/volume.vue

<template>
    <view class="settings-container">
        <!-- 设置选项组 -->
        <view class="settings-section">
            <u-cell-group :border="false">
                <!-- 语音播报设置 -->
                <u-cell title="语音播报" label="控制除app启动提示外所有语音播报的开关" :border-bottom="true">
                    <template #right-icon>
                        <u-switch v-model="settings.audioPlay" activeColor="#4cd964"></u-switch>
                    </template>
                </u-cell>

                <!-- 点击音效设置 -->
                <u-cell title="点击音效" :border-bottom="true">
                    <template #right-icon>
                        <u-switch v-model="settings.audioClick" activeColor="#4cd964"></u-switch>
                    </template>
                </u-cell>

                <!-- 启动提示语设置 -->
                <u-cell title="启动提示语" :border-bottom="true">
                    <template #right-icon>
                        <u-switch v-model="settings.audioStartSwitch" activeColor="#4cd964"></u-switch>
                    </template>
                </u-cell>
            </u-cell-group>

            <!-- 启动提示语输入框 -->
            <view class="input-section">
                <u-textarea v-model="settings.audioStart" placeholder="输入启动时要说的内容，比如：欢迎使用书嗨/很开心又见到你啦"
                    height="100"></u-textarea>
            </view>

            <!-- 语速设置 -->
            <view class="slider-section">
                <view class="slider-title">
                    <text>设置语速</text>
                    <text class="subtitle">(部分机型不支持)</text>
                </view>
                <u-slider :value="settings.audioSpeed" :max="20" :min="5" :step="1" showValue @change="changeSpeed"></u-slider>
            </view>

            <!-- 音调设置 -->
            <view class="slider-section">
                <view class="slider-title">
                    <text>设置音调</text>
                    <text class="subtitle">(部分机型不支持)</text>
                </view>
                <u-slider :value="settings.audioVolume" :max="10" :min="1" :step="1" showValue @change="changeVolume"></u-slider>
            </view>

            <!-- 操作按钮 -->
            <view class="button-group">
                <u-button type="primary" text="保存设置并试听" @click="saveVoiceBroadcast"></u-button>
                <u-button type="warning" text="停止播放" @click="stopPlayback" :plain="true"></u-button>
                <u-button type="error" text="重启app" @click="restartApp" :plain="true"></u-button>
            </view>
        </view>
    </view>
</template>

<script setup>
import {
    ref,
    reactive,
    onMounted
} from 'vue'
import VolumeTTS from '@/utils/VolumeTTS';

// 设置状态
const settings = ref({
    audioStartSwitch: true,
    audioStart: '书嗨，不辜负每一个爱书的人',
    audioSpeed: 10,
    audioVolume: 5,
    "audioPlay": false,
    "audioClick": false,
})

function changeSpeed(value) {
    settings.value.audioSpeed = value
}

function changeVolume(value) {
    settings.value.audioVolume = value
}

// 获取语音播报内容
const getVoiceBroadcast = () => {
    uni.$u.http.get('/app/appConf/getAudioConfig').then(res => {
        if (res.code == 200) {
            settings.value = res.data
        }
    })
}
getVoiceBroadcast()
// 保存语音播报内容
const saveVoiceBroadcast = () => {
    uni.$u.http.post('/app/appConf/setAudioConfig', settings.value).then(res => {
        if (res.code == 200) {
            uni.showToast({
                title: '设置成功',
                icon: 'success'
            })
            initTTS()
        }
    })
}

//初始化tts
const tts = ref(null)
const initTTS = () => {
    let params = {
        speed: settings.value.audioSpeed / 10, // 将 0-10 转换为 0-1
        pitch: settings.value.audioVolume, // 将 0-10 转换为 0-1
        volume: 1,
    }
    tts.value = new VolumeTTS(params)

    settings.value.audioStartSwitch && tts.value.speak(settings.value.audioStart)
}

// 停止播放
function stopPlayback() {
    tts.value && tts.value.stop()
    uni.showToast({
        title: '已停止播放',
        icon: 'none'
    })
}

// 重启应用
function restartApp() {
    uni.showModal({
        title: '提示',
        content: '确定要重启应用吗？',
        success: function (res) {
            if (res.confirm) {
                // #ifdef APP-PLUS
                plus.runtime.restart()
                // #endif

                // #ifdef H5 || MP-WEIXIN
                uni.reLaunch({
                    url: '/pages/index/index'
                })
                // #endif
            }
        }
    })
}

// 加载保存的设置
function loadSettings() {
    try {
        const savedSettings = uni.getStorageSync('tts_settings')
        if (savedSettings) {
            Object.assign(settings, savedSettings)
        }
    } catch (error) {
        console.error('加载设置失败:', error)
    }
}

// 播放点击音效
function playClickSound() {
    if (!settings.audioClick) return

    const audio = uni.createInnerAudioContext()
    audio.src = '/static/audio/click.mp3' // 确保添加点击音效文件
    audio.play()
}

// 生命周期钩子
onMounted(async () => {
    loadSettings()
})
</script>

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

    .card-head {
        display: flex;
        align-items: center;
        padding: 10rpx 0;

        .head-title {
            margin-left: 10rpx;
            font-size: 32rpx;
            font-weight: bold;
        }
    }

    .settings-section {
        margin: 20rpx;
        background-color: #ffffff;
        border-radius: 12rpx;
        padding: 20rpx;
        box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
    }

    .input-section {
        margin: 30rpx 0;
        padding: 0 20rpx;
    }

    .slider-section {
        margin: 30rpx 0;
        padding: 0 20rpx;

        .slider-title {
            margin-bottom: 20rpx;
            font-size: 28rpx;
            color: #333;

            .subtitle {
                font-size: 24rpx;
                color: #999;
                margin-left: 10rpx;
            }
        }
    }

    .button-group {
        margin-top: 50rpx;
        padding: 0 20rpx;

        :deep(.u-button) {
            margin-bottom: 20rpx;
        }
    }
}
</style>