| layout | page |
|---|---|
| css | personal |
| icon | user-circle |
| title | Personal |
MOH-E-KEH-TSEE RAH-SEH-DEE-MOH
( Approximate Respelling )
Listen to individual syllables,
or my full name.
<script>
var audio_dict = {
'syl1': new Audio('{{ site.baseurl }}/assets/mp3/Mo.m4a'),
'syl2': new Audio('{{ site.baseurl }}/assets/mp3/E.m4a'),
'syl3': new Audio('{{ site.baseurl }}/assets/mp3/Ke.m4a'),
'syl4': new Audio('{{ site.baseurl }}/assets/mp3/Tsi.m4a'),
'syl5': new Audio('{{ site.baseurl }}/assets/mp3/Ra.m4a'),
'syl6': new Audio('{{ site.baseurl }}/assets/mp3/Se.m4a'),
'syl7': new Audio('{{ site.baseurl }}/assets/mp3/Li.m4a'),
'syl8': new Audio('{{ site.baseurl }}/assets/mp3/Moo.m4a'),
'syl123': new Audio('{{ site.baseurl }}/assets/mp3/Moeketsi.m4a'),
'syl45': new Audio('{{ site.baseurl }}/assets/mp3/Raselimo.m4a')
};
function activate(syl) {
Array.prototype.forEach.call(document.getElementsByClassName(syl),
e => e.classList.add('hovering'));
}
function deactivate(syl) {
Array.prototype.forEach.call(document.getElementsByClassName(syl),
e => e.classList.remove('hovering'));
}
function play(syl, callback, highlight) {
if (!highlight) highlight = [syl];
highlight.forEach(activate);
audio_dict[syl].currentTime = 0;
audio_dict[syl].onended = () => { highlight.forEach(deactivate); if (callback) callback(); }
audio_dict[syl].play();
}
['syl1','syl2','syl3','syl4','syl5', 'syl6', 'syl7', 'syl8'].forEach(function (syl) {
Array.prototype.forEach.call(document.getElementsByClassName(syl), function (e) {
e.onmouseenter = () => activate(syl);
e.onmouseleave = () => deactivate(syl);
e.onclick = () => play(syl);
});
});
function play_steps() {
play('syl1',
() => play('syl2',
() => play('syl3',
() => play('syl4',
() => setTimeout(play, 300,
'syl5', () => play('syl6',
() => play('syl7',
() => play('syl8'))))))));
}
function play_name() {
play('syl123', () => setTimeout(() => play('syl45', null, ['syl5','syl6', 'syl7', 'syl8']), 150),
['syl1','syl2','syl3', 'syl4']);
}
</script>