99i/voices

1document.addEventListener('DOMContentLoaded', function() {2    fetch('https://99i-tts.hf.space/voices?l=zh&d')3        .then(response => response.json())4        .then(data => {5            const voices = data.voices;6            displayVoices(voices);7            setupFilters(voices);8        });9 10    function displayVoices(voices) {11        const tableBody = document.getElementById('voicesTable').getElementsByTagName('tbody')[0];12        tableBody.innerHTML = ''; // 清空表格13 14        voices.forEach(voice => {15            const row = tableBody.insertRow();16            row.insertCell(0).innerText = voice.DisplayName;17            row.insertCell(1).innerText = voice.Gender;18            row.insertCell(2).innerText = voice.LocalName;19            row.insertCell(3).innerText = voice.LocaleName;20            row.insertCell(4).innerText = voice.Status;21            // 插入其他单元格22        });23    }24 25    function setupFilters(voices) {26        const genderSelect = document.getElementById('gender');27        const localeSelect = document.getElementById('locale');28 29        genderSelect.addEventListener('change', () => filterVoices());30        localeSelect.addEventListener('change', () => filterVoices());31 32        function filterVoices() {33            const selectedGender = genderSelect.value;34            const selectedLocale = localeSelect.value;35 36            const filteredVoices = voices.filter(voice => {37                return (selectedGender === '' || voice.Gender === selectedGender) &&38                       (selectedLocale === '' || voice.Locale === selectedLocale);39            });40 41            displayVoices(filteredVoices);42        }43    }44});45body {46    font-family: Arial, sans-serif;47}48 49#filters {50    margin-bottom: 20px;51}52 53table {54    width: 100%;55    border-collapse: collapse;56}57 58th, td {59    border: 1px solid #ddd;60    padding: 8px;61    text-align: left;62}63 64th {65    background-color: #f2f2f2;66}67