script.js

document.addEventListener('DOMContentLoaded', function() {
    fetch('https://99i-tts.hf.space/voices?l=zh&d')
        .then(response => response.json())
        .then(data => {
            const voices = data.voices;
            displayVoices(voices);
            setupFilters(voices);
        });

    function displayVoices(voices) {
        const tableBody = document.getElementById('voicesTable').getElementsByTagName('tbody')[0];
        tableBody.innerHTML = ''; // 清空表格

        voices.forEach(voice => {
            const row = tableBody.insertRow();
            row.insertCell(0).innerText = voice.ShortName;
            row.insertCell(1).innerText = voice.Gender;
            row.insertCell(2).innerText = voice.LocalName;
            row.insertCell(3).innerText = voice.LocaleName;
            row.insertCell(4).innerText = voice.Status;
            row.insertCell(5).innerText = voice.SampleRateHertz;
            row.insertCell(6).innerText = voice.StyleList ? voice.StyleList.join(', ') : '';
            row.insertCell(7).innerText = voice.RolePlayList ? voice.RolePlayList.join(', ') : '';
            row.insertCell(8).innerText = voice.VoiceType;
            row.insertCell(9).innerText = voice.WordsPerMinute;
            // 插入其他单元格
            // 添加试听音频列
            const audioCell = row.insertCell(10);
            if (voice.StyleList && voice.StyleList.length > 0) {
                voice.StyleList.forEach(style => {
                    const styleName = document.createElement('span');
                    styleName.innerText = `${style}: `;
                    audioCell.appendChild(styleName);

                    const audioUrl = `https://99i-tts.hf.space/tts?v=${voice.ShortName}&t=很高兴见到你&s=${style}`;
                    const audio = document.createElement('audio');
                    audio.src = audioUrl;
                    audio.controls = true;
                    audioCell.appendChild(audio);
                });
            } else {
                // 如果没有风格，提供一个默认的试听音频
                const audioUrl = `https://99i-tts.hf.space/tts?v=${voice.ShortName}&t=很高兴见到你`;
                const audio = document.createElement('audio');
                audio.src = audioUrl;
                audio.controls = true;
                audioCell.appendChild(audio);
            }
        });
    }

    function setupFilters(voices) {
        const genderSelect = document.getElementById('gender');
        const localeSelect = document.getElementById('locale');

        genderSelect.addEventListener('change', () => filterVoices());
        localeSelect.addEventListener('change', () => filterVoices());

        function filterVoices() {
            const selectedGender = genderSelect.value;
            const selectedLocale = localeSelect.value;

            const filteredVoices = voices.filter(voice => {
                return (selectedGender === '' || voice.Gender === selectedGender) &&
                       (selectedLocale === '' || voice.Locale === selectedLocale);
            });

            displayVoices(filteredVoices);
        }
    }
});