Sing a song with JavaScript

Use speechSynthesis to sing a song on Mac. Currently runs only with Chrome and Safari on Mac.

HTML

<h1>Sing with JavaScript</h1>
<h3>Currently runs only with Chrome and Safari on Mac</h3>
<div>
    <label for="rate">Rate:</label>
    <input type="range" id="rate" name="rate" min="0.1" max="10" step="0.1" onchange="change(this)" value="1" /><span id="v_rate">1</span>
</div>
<div>
    <label for="pitch">Pitch:</label>
    <input type="range" id="pitch" name="pitch" min="0" max="2" step="0.1" onchange="change(this)" value="1" /><span id="v_pitch">1</span>
</div>
<div>
    <label for="volume">Volume:</label>
    <input type="range" id="volume" name="volume" min="0" max="1" step="0.1" onchange="change(this)" value="1" /><span id="v_volume">1</span>
</div>
<button onclick="sing('Bells')">Bells</button>
<button onclick="sing('Cellos')">Cellos</button>
<button onclick="sing('Pipe Organ')">Pipe Organ</button>
<button onclick="sing('Good News')">Good News</button>
<button onclick="sing('Bad News')">Bad News</button>
<button onclick="sing('default')">default</button>
<button onclick="stop()">Stop!</button>

JavaScript

if (!window.speechSynthesis) {
    alert("Your browser doesn't support speechSynthesis !!");
}

var voices;
window.loadVoices = function() {
    voices = window.speechSynthesis.getVoices();
    if (voices.length == 0) alert("cannot get voices !!");
    console.log(voices.map(function (x) {return x.name;}));
}

var msg = new SpeechSynthesisUtterance("la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la");

window.change = function (e) {
    msg[e.name] = e.value;
    document.getElementById('v_' + e.name).innerHTML = e.value;
}
window.sing = function (name) {
    stop();
    loadVoices();
    msg.voice = voices[0];
    for (var i = 0; i < voices.length; i++)
    if (voices[i].name == name) msg.voice = voices[i];
    speechSynthesis.speak(msg);
}
window.stop = function () {
    speechSynthesis.cancel();
}