> because of the limitation on browser editor, below code can only reach the limited kinds of voice samples. And **most of them are from MS**.
> If you want to access **Google version**, please go: https://responsivevoice.org/

# HTML

<select id="voiceSelect" onchange=play()></select>
<p id="voicePlay">select a voice</p>

# JS

    function populateVoiceList() {
      if (typeof speechSynthesis === "undefined") {
        return;
      }

      const voices = speechSynthesis.getVoices();

      if (voices.length === 0) {
        // If no voices are available, try again later
        return;
      }

      const voiceSelect = document.getElementById("voiceSelect");
      voiceSelect.innerHTML = ''; // Clear the existing options

      for (let i = 0; i < voices.length; i++) {
        const option = document.createElement("option");
        option.textContent = `${voices[i].name} (${voices[i].lang})`;


        option.setAttribute("data-lang", voices[i].lang);
        option.setAttribute("data-name", voices[i].name);
        voiceSelect.appendChild(option);
      }
    }

    // Populate the voice list when voices are loaded
    populateVoiceList();
    if (typeof speechSynthesis !== "undefined" && speechSynthesis.onvoiceschanged !== undefined) {
      speechSynthesis.onvoiceschanged = populateVoiceList;
    }

    function play() {
      // Create a new instance of SpeechSynthesisUtterance
      var utterance = new SpeechSynthesisUtterance('Hello, how are you?');
      var selectedVoice = document.getElementById("voiceSelect").selectedOptions[0].getAttribute('data-name');

      // Set the voice to the selected voice
      utterance.voice = speechSynthesis.getVoices().find(voice => voice.name === selectedVoice);

      document.getElementById("voicePlay").textContent = selectedVoice;

      // Speak the utterance
      window.speechSynthesis.speak(utterance);
    }