Difference between revisions of "Widget:Pinyin chart"

(testing fullscreen mode for pinyin table)
 
(22 intermediate revisions by 3 users not shown)
Line 12: Line 12:
 
     margin-bottom: 1.5em;
 
     margin-bottom: 1.5em;
 
}
 
}
 +
 
#pinyin-chart-settings .additional-settings-label {
 
#pinyin-chart-settings .additional-settings-label {
 
     background-color:#F5F5F5;
 
     background-color:#F5F5F5;
Line 196: Line 197:
 
.last-col.row-bpmf.table-highlight, .last-col.row-zcs.table-highlight, .last-col.row-jqx.table-highlight {
 
.last-col.row-bpmf.table-highlight, .last-col.row-zcs.table-highlight, .last-col.row-jqx.table-highlight {
 
     background: rgba(245,245,248,0.7);
 
     background: rgba(245,245,248,0.7);
 +
}
 +
 +
/* FullScreen modal styling */
 +
.pinyin-chart-modal {
 +
    box-sizing: border-box;
 +
    position: fixed;
 +
    left: 0px;
 +
    top: 0px;
 +
    width: 100%;
 +
    height: 100%;
 +
    background-color: white;
 +
    padding: 20px;
 +
    overflow: auto;
 +
}
 +
.hidden-by-pinyin-chart-modal {
 +
    display: none !important;
 +
}
 +
.pinyin-chart-modal-active {
 +
    width: 100% !important;
 +
    height: 100% !important;
 +
    overflow: hidden !important;
 
}
 
}
  
Line 201: Line 223:
 
<div id="pinyin-chart-settings">
 
<div id="pinyin-chart-settings">
 
   <p>
 
   <p>
−
     <button id="fullscreen-button">Enter fullscreen mode</button>
+
     <button id="table-toggle-large-modal">Enter FullScreen</button>
 
     <span class="tone-option-label"><strong>Tone:</strong></span>
 
     <span class="tone-option-label"><strong>Tone:</strong></span>
 
     <span class="tone-option"><input type="radio" name="tone" value="1" /> 1 </span>
 
     <span class="tone-option"><input type="radio" name="tone" value="1" /> 1 </span>
Line 235: Line 257:
  
 
<div class="pinyin-table-audio-container"></div>
 
<div class="pinyin-table-audio-container"></div>
−
<div class="table-container" id="pinyin-table-container">
+
<div class="table-container">
 
<table class="pinyin-table medium" id="pinyin-table">
 
<table class="pinyin-table medium" id="pinyin-table">
 
<!--{if !isset($exclude_None)}--><tr>
 
<!--{if !isset($exclude_None)}--><tr>
Line 406: Line 428:
 
<!--{if !isset($exclude_col_i)}--><td class="row-bpmf col-i" id="pian"><div class="table-pinyin">pian</div><div class="table-link"><a href=http://resources.allsetlearning.com/chinese/pronunciation/pian>pian</a></div><div class="table-ipa">[pʰiɛn]</div><div class="table-zhuyin">ㄆㄧㄢ</div><div class="table-wade-giles">p'ien</div></td><!--{/if}-->
 
<!--{if !isset($exclude_col_i)}--><td class="row-bpmf col-i" id="pian"><div class="table-pinyin">pian</div><div class="table-link"><a href=http://resources.allsetlearning.com/chinese/pronunciation/pian>pian</a></div><div class="table-ipa">[pʰiɛn]</div><div class="table-zhuyin">ㄆㄧㄢ</div><div class="table-wade-giles">p'ien</div></td><!--{/if}-->
 
<!--{if !isset($exclude_col_i)}--><td class="row-bpmf col-i"></td><!--{/if}-->
 
<!--{if !isset($exclude_col_i)}--><td class="row-bpmf col-i"></td><!--{/if}-->
−
<!--{if !isset($exclude_col_i)}--><td class="row-bpmf col-i" id="min"><div class="table-pinyin">min</div><div class="table-link"><a href=http://resources.allsetlearning.com/chinese/pronunciation/min>min</a></div><div class="table-ipa">[pʰin]</div><div class="table-zhuyin">ㄆㄧㄣ</div><div class="table-wade-giles">p'in</div></td><!--{/if}-->
+
<!--{if !isset($exclude_col_i)}--><td class="row-bpmf col-i" id="pin"><div class="table-pinyin">pin</div><div class="table-link"><a href=http://resources.allsetlearning.com/chinese/pronunciation/pin>pin</a></div><div class="table-ipa">[pʰin]</div><div class="table-zhuyin">ㄆㄧㄣ</div><div class="table-wade-giles">p'in</div></td><!--{/if}-->
 
<!--{if !isset($exclude_col_i)}--><td class="row-bpmf col-i" id="ping"><div class="table-pinyin">ping</div><div class="table-link"><a href=http://resources.allsetlearning.com/chinese/pronunciation/ping>ping</a></div><div class="table-ipa">[pʰiŋ]</div><div class="table-zhuyin">ㄆㄧㄥ</div><div class="table-wade-giles">p'ing</div></td><!--{/if}-->
 
<!--{if !isset($exclude_col_i)}--><td class="row-bpmf col-i" id="ping"><div class="table-pinyin">ping</div><div class="table-link"><a href=http://resources.allsetlearning.com/chinese/pronunciation/ping>ping</a></div><div class="table-ipa">[pʰiŋ]</div><div class="table-zhuyin">ㄆㄧㄥ</div><div class="table-wade-giles">p'ing</div></td><!--{/if}-->
 
<!--{if !isset($exclude_col_i)}--><td class="row-bpmf col-i"></td><!--{/if}-->
 
<!--{if !isset($exclude_col_i)}--><td class="row-bpmf col-i"></td><!--{/if}-->
Line 453: Line 475:
 
<!--{if !isset($exclude_col_i)}--><td class="row-bpmf col-i" id="mian"><div class="table-pinyin">mian</div><div class="table-link"><a href=http://resources.allsetlearning.com/chinese/pronunciation/mian>mian</a></div><div class="table-ipa">[miɛn]</div><div class="table-zhuyin">ㄇㄧㄢ</div><div class="table-wade-giles">mien</div></td><!--{/if}-->
 
<!--{if !isset($exclude_col_i)}--><td class="row-bpmf col-i" id="mian"><div class="table-pinyin">mian</div><div class="table-link"><a href=http://resources.allsetlearning.com/chinese/pronunciation/mian>mian</a></div><div class="table-ipa">[miɛn]</div><div class="table-zhuyin">ㄇㄧㄢ</div><div class="table-wade-giles">mien</div></td><!--{/if}-->
 
<!--{if !isset($exclude_col_i)}--><td class="row-bpmf col-i"></td><!--{/if}-->
 
<!--{if !isset($exclude_col_i)}--><td class="row-bpmf col-i"></td><!--{/if}-->
−
<!--{if !isset($exclude_col_i)}--><td class="row-bpmf col-i"></td><!--{/if}-->
+
<!--{if !isset($exclude_col_i)}--><td class="row-bpmf col-i" id="min"><div class="table-pinyin">min</div><div class="table-link"><a href=http://resources.allsetlearning.com/chinese/pronunciation/min>min</a></div><div class="table-ipa">[min]</div><div class="table-zhuyin">ㄇㄧㄣ</div><div class="table-wade-giles">min</div></td><!--{/if}-->
 
<!--{if !isset($exclude_col_i)}--><td class="row-bpmf col-i" id="ming"><div class="table-pinyin">ming</div><div class="table-link"><a href=http://resources.allsetlearning.com/chinese/pronunciation/ming>ming</a></div><div class="table-ipa">[miŋ]</div><div class="table-zhuyin">ㄇㄧㄥ</div><div class="table-wade-giles">ming</div></td><!--{/if}-->
 
<!--{if !isset($exclude_col_i)}--><td class="row-bpmf col-i" id="ming"><div class="table-pinyin">ming</div><div class="table-link"><a href=http://resources.allsetlearning.com/chinese/pronunciation/ming>ming</a></div><div class="table-ipa">[miŋ]</div><div class="table-zhuyin">ㄇㄧㄥ</div><div class="table-wade-giles">ming</div></td><!--{/if}-->
 
<!--{if !isset($exclude_col_i)}--><td class="row-bpmf col-i"></td><!--{/if}-->
 
<!--{if !isset($exclude_col_i)}--><td class="row-bpmf col-i"></td><!--{/if}-->
Line 1,371: Line 1,393:
 
</table></div>
 
</table></div>
 
<script>
 
<script>
 +
 +
function defer(method) {
 +
    if (window.jQuery) {
 +
        method();
 +
    } else {
 +
        setTimeout(function() { defer(method) }, 50);
 +
    }
 +
}
 +
 
var audioEndedListener = function() {
 
var audioEndedListener = function() {
 
     var $audioDiv = $('.pinyin-table-audio-container');
 
     var $audioDiv = $('.pinyin-table-audio-container');
 
     if ($audioDiv.children().length>1) {
 
     if ($audioDiv.children().length>1) {
−
$audioDiv.children().get(1).play();
+
        $audioDiv.children().get(1).play();
 
     }
 
     }
 
     $(this).remove();
 
     $(this).remove();
 
     if ($audioDiv.children().length>1) {
 
     if ($audioDiv.children().length>1) {
−
$audioDiv.children().get(1).pause();
+
        $audioDiv.children().get(1).pause();
−
$audioDiv.children().get(1).load();
+
        $audioDiv.children().get(1).load();
 
     } else {
 
     } else {
−
$('.playing-audio').removeClass('playing-audio');
+
        $('.playing-audio').removeClass('playing-audio');
 
     }
 
     }
 
};
 
};
 
var audioCanPlayListener = function() {
 
var audioCanPlayListener = function() {
 
     if (this===$('.pinyin-table-audio-container audio:last-child').get(0)) {
 
     if (this===$('.pinyin-table-audio-container audio:last-child').get(0)) {
−
console.log('Removing loading-audio class');
+
        console.log('Removing loading-audio class');
−
$('.pinyin-table').removeClass('loading-audio');
+
        $('.pinyin-table').removeClass('loading-audio');
 
     }
 
     }
 
};
 
};
Line 1,394: Line 1,425:
 
var vowelAddTone = function(vowel,number) {
 
var vowelAddTone = function(vowel,number) {
 
     var tones = ['āēīōūǖ',
 
     var tones = ['āēīōūǖ',
−
'áéíóúǘ',
+
                'áéíóúǘ',
−
'ǎěǐǒǔǚ',
+
                'ǎěǐǒǔǚ',
−
'àèìòùǜ'][number-1]
+
                'àèìòùǜ'][number-1]
 
     return tones['aeiouü'.indexOf(vowel)]
 
     return tones['aeiouü'.indexOf(vowel)]
 
};
 
};
 
var syllableAddTone = function(syllable,number) {
 
var syllableAddTone = function(syllable,number) {
 
     if (syllable.indexOf("a")!==-1) {
 
     if (syllable.indexOf("a")!==-1) {
−
return syllable.substr(0,syllable.indexOf("a")) + vowelAddTone('a',number) + syllable.substr(syllable.indexOf("a")+1,syllable.length);
+
        return syllable.substr(0,syllable.indexOf("a")) + vowelAddTone('a',number) + syllable.substr(syllable.indexOf("a")+1,syllable.length);
 
     } else if (syllable.indexOf("e")!==-1) {
 
     } else if (syllable.indexOf("e")!==-1) {
−
return syllable.substr(0,syllable.indexOf("e")) + vowelAddTone('e',number) + syllable.substr(syllable.indexOf("e")+1,syllable.length);
+
        return syllable.substr(0,syllable.indexOf("e")) + vowelAddTone('e',number) + syllable.substr(syllable.indexOf("e")+1,syllable.length);
 
     } else if (syllable.indexOf("ou")!==-1) {
 
     } else if (syllable.indexOf("ou")!==-1) {
−
return syllable.substr(0,syllable.indexOf("o")) + vowelAddTone('e',number) + syllable.substr(syllable.indexOf("o")+1,syllable.length);
+
        return syllable.substr(0,syllable.indexOf("o")) + vowelAddTone('e',number) + syllable.substr(syllable.indexOf("o")+1,syllable.length);
 
     } else {
 
     } else {
−
var vowels = 'aeiouü';
+
        var vowels = 'aeiouü';
−
var vowelCount = 0
+
        var vowelCount = 0
−
for (var i=0; i<syllable.length; i++) {
+
        for (var i=0; i<syllable.length; i++) {
−
    if (vowels.indexOf(syllable[i])!==-1) {
+
            if (vowels.indexOf(syllable[i])!==-1) {
−
vowelCount++;
+
                vowelCount++;
−
    }
+
            }
−
}
+
        }
−
if (vowelCount===1) {
+
        if (vowelCount===1) {
−
    for (var i=0; i<vowels.length; i++) {
+
            for (var i=0; i<vowels.length; i++) {
−
if (syllable.indexOf(vowels[i])!==-1) {
+
                if (syllable.indexOf(vowels[i])!==-1) {
−
    return syllable.substr(0,syllable.indexOf(vowels[i])) + vowelAddTone(syllable[syllable.indexOf(vowels[i])],number) + syllable.substr(syllable.indexOf(vowels[i])+1,syllable.length);
+
                    return syllable.substr(0,syllable.indexOf(vowels[i])) + vowelAddTone(syllable[syllable.indexOf(vowels[i])],number) + syllable.substr(syllable.indexOf(vowels[i])+1,syllable.length);
−
}
+
                }
−
    }
+
            }
−
} else {
+
        } else {
−
    var first_vowel_index = 1000;
+
            var first_vowel_index = 1000;
−
    for (var i=0; i<vowels.length; i++) {
+
            for (var i=0; i<vowels.length; i++) {
−
if (syllable.indexOf(vowels[i])!==-1 && syllable.indexOf(vowels[i])<first_vowel_index) {
+
                if (syllable.indexOf(vowels[i])!==-1 && syllable.indexOf(vowels[i])<first_vowel_index) {
−
    first_vowel_index = syllable.indexOf(vowels[i])
+
                    first_vowel_index = syllable.indexOf(vowels[i])
−
}
+
                }
−
    }
+
            }
−
    return syllable.substr(0,first_vowel_index+1) + vowelAddTone(syllable[first_vowel_index+1],number) + syllable.substr(first_vowel_index+2,syllable.length);
+
            return syllable.substr(0,first_vowel_index+1) + vowelAddTone(syllable[first_vowel_index+1],number) + syllable.substr(first_vowel_index+2,syllable.length);
−
}
+
        }
 
     }
 
     }
 
};
 
};
  
 
/*pinyin table scripts*/
 
/*pinyin table scripts*/
−
$(document).ready( function() {
+
var createTable = function() {
  
 
     $('.table-link').hide();
 
     $('.table-link').hide();
Line 1,442: Line 1,473:
  
 
     $('#pinyin-chart-settings .additional-settings').hide();
 
     $('#pinyin-chart-settings .additional-settings').hide();
−
 
−
    //Fullscreen mode
 
−
    $('#fullscreen-button').click(function() {
 
−
        var e = document.getElementById('pinyin-table-container');
 
−
        if (e.requestFullscreen) {
 
−
            e.requestFullscreen();
 
−
        } else if (e.msRequestFullscreen) {
 
−
            e.msRequestFullscreen();
 
−
        } else if (e.mozRequestFullScreen) {
 
−
            e.mozRequestFullScreen();
 
−
        } else if (e.webkitRequestFullscreen) {
 
−
            e.webkitRequestFullscreen) {
 
−
        }
 
−
    });
 
  
 
     //Toggle additional settings
 
     //Toggle additional settings
 
     $('#pinyin-chart-settings #additional-settings-collapse').click( function(e) {
 
     $('#pinyin-chart-settings #additional-settings-collapse').click( function(e) {
−
e.preventDefault();
+
        e.preventDefault();
−
if ($(this).text()==="Show more Settings") {
+
        if ($(this).text()==="Show more Settings") {
−
    $(this).text("Show less Settings");
+
            $(this).text("Show less Settings");
−
    $('#pinyin-chart-settings .additional-settings').slideDown();
+
            $('#pinyin-chart-settings .additional-settings').slideDown();
−
} else {
+
        } else {
−
    $(this).text("Show more Settings");
+
            $(this).text("Show more Settings");
−
    $('#pinyin-chart-settings .additional-settings').slideUp();
+
            $('#pinyin-chart-settings .additional-settings').slideUp();
−
}
+
        }
 
     });
 
     });
  
 
     //highlight row and col of hovered cell
 
     //highlight row and col of hovered cell
 
     $('#pinyin-table td').hover( function() {
 
     $('#pinyin-table td').hover( function() {
−
if ($(this).children('div.table-pinyin').length && $('input[name="chart-mode"]:checked').val()==="audio") {
+
        if ($(this).children('div.table-pinyin').length && $('input[name="chart-mode"]:checked').val()==="audio") {
−
    $(this).addClass('table-extra-highlight');
+
            $(this).addClass('table-extra-highlight');
−
    $(this).siblings().addClass('table-highlight');
+
            $(this).siblings().addClass('table-highlight');
−
    var rowIndex = $(this).prevAll().length+1;
+
            var rowIndex = $(this).prevAll().length+1;
−
    $('#pinyin-table tr :nth-child('+rowIndex+')').addClass('table-highlight');
+
            $('#pinyin-table tr :nth-child('+rowIndex+')').addClass('table-highlight');
−
};
+
        };
 
     }, function() {
 
     }, function() {
−
$(this).removeClass('table-extra-highlight')
+
        $(this).removeClass('table-extra-highlight')
−
$('.table-highlight').removeClass('table-highlight');
+
        $('.table-highlight').removeClass('table-highlight');
 
     }).click( function() {
 
     }).click( function() {
−
if ($(this).children('div.table-pinyin').length && $('input[name="chart-mode"]:checked').val()==="audio") {
+
        if ($(this).children('div.table-pinyin').length && $('input[name="chart-mode"]:checked').val()==="audio") {
−
    var tones=$('input[name=\'tone\']:checked').val();
+
            var tones=$('input[name=\'tone\']:checked').val();
−
    var $audioDiv = $('.pinyin-table-audio-container');
+
            var $audioDiv = $('.pinyin-table-audio-container');
−
    $audioDiv.empty();
+
            $audioDiv.empty();
−
    for (var i=0; i<tones.length; i++) {
+
            for (var i=0; i<tones.length; i++) {
−
var sound_url = "http://resources.allsetlearning.com/pronwiki/resources/pinyin-audio/" + $(this).attr('id') + tones[i] + ".mp3"
+
                var sound_url = "http://resources.allsetlearning.com/pronwiki/resources/pinyin-audio/" + $(this).attr('id') + tones[i] + ".mp3"
−
sound_url = sound_url.replace('ü', 'u%CC%88');
+
                sound_url = sound_url.replace('ü', 'u%CC%88');
−
$audioDiv.append("<audio src=\"" + sound_url + "\" type=\"audio/mpeg\"></audio>");
+
                $audioDiv.append("<audio src=\"" + sound_url + "\" type=\"audio/mpeg\"></audio>");
−
    };
+
            };
−
    for (var i=0; i<$audioDiv.children().length; i++) {
+
            for (var i=0; i<$audioDiv.children().length; i++) {
−
$audioDiv.children().get(i).addEventListener("ended",audioEndedListener);
+
                $audioDiv.children().get(i).addEventListener("ended",audioEndedListener);
−
$audioDiv.children().get(i).addEventListener("canplay",audioCanPlayListener);
+
                $audioDiv.children().get(i).addEventListener("canplay",audioCanPlayListener);
−
    };
+
            };
−
    $audioDiv.children().get(0).pause();
+
            $audioDiv.children().get(0).pause();
−
    $audioDiv.children().get(0).load();
+
            $audioDiv.children().get(0).load();
−
    $('.pinyin-table').addClass('loading-audio');
+
            $('.pinyin-table').addClass('loading-audio');
−
    $('.playing-audio').removeClass('playing-audio');
+
            $('.playing-audio').removeClass('playing-audio');
−
    $(this).addClass('playing-audio');
+
            $(this).addClass('playing-audio');
−
    $audioDiv.children().get(0).play();
+
            $audioDiv.children().get(0).play();
−
    if ($audioDiv.children().length>1) {
+
            if ($audioDiv.children().length>1) {
−
$audioDiv.children().get(1).pause();
+
                $audioDiv.children().get(1).pause();
−
$audioDiv.children().get(1).load();
+
                $audioDiv.children().get(1).load();
−
    };
+
            };
−
};
+
        };
 
     });
 
     });
  
 
     //collapse column groups
 
     //collapse column groups
 
     $('th.col-a, th.col-e, th.col-o, th.col-i, th.col-u, th.col-v').hover( function() {
 
     $('th.col-a, th.col-e, th.col-o, th.col-i, th.col-u, th.col-v').hover( function() {
−
if ($(this).hasClass('col-a')) { var thClass='col-a'; } else
+
        var thClass;
−
    if ($(this).hasClass('col-e')) { var thClass='col-e'; } else
+
        if ($(this).hasClass('col-a')) {
−
if ($(this).hasClass('col-o')) { var thClass='col-o'; } else
+
            thClass='col-a';
−
    if ($(this).hasClass('col-i')) { var thClass='col-i'; } else
+
        } else if ($(this).hasClass('col-e')) {
−
if ($(this).hasClass('col-u')) { var thClass='col-u'; } else
+
            thClass='col-e';
−
    if ($(this).hasClass('col-v')) { var thClass='col-v'; };
+
        } else if ($(this).hasClass('col-o')) {
−
$('th.'+thClass).addClass('table-selected');
+
            thClass='col-o';
 +
        } else if ($(this).hasClass('col-i')) {
 +
            thClass='col-i';
 +
        } else if ($(this).hasClass('col-u')) {
 +
            thClass='col-u';
 +
        } else if ($(this).hasClass('col-v')) {
 +
            thClass='col-v';
 +
        }
 +
        $('th.'+thClass).addClass('table-selected');
 
     }, function() {
 
     }, function() {
−
$('.table-selected').removeClass('table-selected');
+
        $('.table-selected').removeClass('table-selected');
 
     }).click( function() {
 
     }).click( function() {
−
if ($(this).hasClass('col-a')) { var thClass='col-a'; } else
+
        var thClass;
−
    if ($(this).hasClass('col-e')) { var thClass='col-e'; } else
+
        if ($(this).hasClass('col-a')) {
−
if ($(this).hasClass('col-o')) { var thClass='col-o'; } else
+
            thClass='col-a';
−
    if ($(this).hasClass('col-i')) { var thClass='col-i'; } else
+
        } else if ($(this).hasClass('col-e')) {
−
if ($(this).hasClass('col-u')) { var thClass='col-u'; } else
+
            thClass='col-e';
−
    if ($(this).hasClass('col-v')) { var thClass='col-v'; };
+
        } else if ($(this).hasClass('col-o')) {
−
if ($(this).hasClass('col-placeholder')) {
+
            thClass='col-o';
−
    $('#pinyin-table .'+thClass).show();
+
        } else if ($(this).hasClass('col-i')) {
−
    $('#pinyin-table .'+thClass+'.col-placeholder').hide();
+
            thClass='col-i';
−
} else {
+
        } else if ($(this).hasClass('col-u')) {
−
    $('#pinyin-table .'+thClass).hide();
+
            thClass='col-u';
−
    $('#pinyin-table .'+thClass+'.col-placeholder').show();
+
        } else if ($(this).hasClass('col-v')) {
−
};
+
            thClass='col-v';
 +
        }
 +
        if ($(this).hasClass('col-placeholder')) {
 +
            $('#pinyin-table .'+thClass).show();
 +
            $('#pinyin-table .'+thClass+'.col-placeholder').hide();
 +
        } else {
 +
            $('#pinyin-table .'+thClass).hide();
 +
            $('#pinyin-table .'+thClass+'.col-placeholder').show();
 +
        }
 
     });
 
     });
  
 
     //change text size
 
     //change text size
 
     $('div#pinyin-chart-settings div.additional-settings input[name="text-size"]').click( function() {
 
     $('div#pinyin-chart-settings div.additional-settings input[name="text-size"]').click( function() {
−
var new_size = $('input[name="text-size"]:checked').val();
+
        var new_size = $('input[name="text-size"]:checked').val();
−
console.log('Changing table size to '+new_size);
+
        console.log('Changing table size to '+new_size);
−
$('.pinyin-table').removeClass('small').removeClass('medium').removeClass('large');
+
        $('.pinyin-table').removeClass('small').removeClass('medium').removeClass('large');
−
$('.pinyin-table').addClass(new_size);
+
        $('.pinyin-table').addClass(new_size);
 
     });
 
     });
  
Line 1,545: Line 1,578:
 
     //change chart mode
 
     //change chart mode
 
     $('div#pinyin-chart-settings div.additional-settings input[name="chart-mode"]').click( function() {
 
     $('div#pinyin-chart-settings div.additional-settings input[name="chart-mode"]').click( function() {
−
var new_mode = $('input[name="chart-mode"]:checked').val();
+
        var new_mode = $('input[name="chart-mode"]:checked').val();
−
if (new_mode==="link") {
+
        if (new_mode==="link") {
−
    $('.table-pinyin').hide();
+
            $('.table-pinyin').hide();
−
    $('.table-link').show();
+
            $('.table-link').show();
−
} else {
+
        } else {
−
    $('.table-pinyin').show();
+
            $('.table-pinyin').show();
−
    $('.table-link').hide();
+
            $('.table-link').hide();
−
}
+
        }
 
     });
 
     });
  
 
     //toggle showing ipa, zhuyin, wade-giles
 
     //toggle showing ipa, zhuyin, wade-giles
−
     $('#table-toggle-ipa').click( function() {
+
     $('#table-toggle-ipa').click(function() {
−
if ($(this).prop('checked')) {
+
        if ($(this).prop('checked')) {
−
    $('.table-ipa').show();
+
            $('.table-ipa').show();
−
} else {
+
        } else {
−
    $('.table-ipa').hide();
+
            $('.table-ipa').hide();
−
}
+
        }
 
     });
 
     });
−
     $('#table-toggle-zhuyin').click( function() {
+
     $('#table-toggle-zhuyin').click(function() {
−
if ($(this).prop('checked')) {
+
        if ($(this).prop('checked')) {
−
    $('.table-zhuyin').show();
+
            $('.table-zhuyin').show();
−
} else {
+
        } else {
−
    $('.table-zhuyin').hide();
+
            $('.table-zhuyin').hide();
−
}
+
        }
 
     });
 
     });
−
     $('#table-toggle-wade-giles').click( function() {
+
     $('#table-toggle-wade-giles').click(function() {
−
if ($(this).prop('checked')) {
+
        if ($(this).prop('checked')) {
−
    $('.table-wade-giles').show();
+
            $('.table-wade-giles').show();
−
} else {
+
        } else {
−
    $('.table-wade-giles').hide();
+
            $('.table-wade-giles').hide();
−
}
+
        }
 
     });
 
     });
−
});
 
  
 +
    //toggle large modal "fullscreen" mode
 +
    $('#table-toggle-large-modal').click(function() {
 +
        if ($('.pinyin-chart-modal').length) {
 +
            //already in fullscreen mode, so disable
 +
            $(this).text('Enter FullScreen');
 +
            $('html, body').removeClass('pinyin-chart-modal-active');
 +
            $('body').children().removeClass('hidden-by-pinyin-chart-modal');
 +
            var $mwContentText = $('#mw-content-text');
 +
            $mwContentText.prepend($('.table-container'));
 +
            $mwContentText.prepend($('.pinyin-table-audio-container'));
 +
            $mwContentText.prepend($('#pinyin-chart-settings'));
 +
            $('.pinyin-chart-modal').remove();
 +
        } else {
 +
            //enable fullscreen mode
 +
            $(this).text('Exit FullScreen');
 +
            $('html, body').addClass('pinyin-chart-modal-active');
 +
            $('body').children().addClass('hidden-by-pinyin-chart-modal');
 +
            $('body').append('<div class="pinyin-chart-modal"></div>');
 +
            var $modal = $('.pinyin-chart-modal');
 +
            $modal.append($('#pinyin-chart-settings'));
 +
            $modal.append($('.pinyin-table-audio-container'));
 +
            $modal.append($('.table-container'));
 +
        }
 +
    });
 +
}
 +
 +
defer(createTable);
 
</script>
 
</script>

Latest revision as of 13:12, 20 June 2020

<style> /* Pinyin Table */

div.table-container { 

   display: inline-block;
   border-color: rgba(0,0,0,.15);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   max-width: 100%;
   overflow: auto;
   margin-bottom: 1.5em;

}

  1. pinyin-chart-settings .additional-settings-label {
   background-color:#F5F5F5;
   border-color: rgba(0,0,0,0.15);
   border-width: 1px;
   border-style: solid;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   padding: 6px;
   font-size:13pt;

}

  1. pinyin-chart-settings .additional-settings-content {
   border-color: rgba(0,0,0,0.15);
   border-width: 1px;
   border-top-width: 0px;
   border-style: solid;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   padding: 6px;

}

  1. pinyin-chart-settings .tone-option-label,
  2. pinyin-chart-settings .tone-option {
   padding-right: 10px;

}

  1. pinyin-chart-settings .settings-collapse {
   float: right;

} .pinyin-table { 

   background-color: #a9d0f5;
   table-layout: fixed;
   width: 0px;
   text-align: center;

}

.pinyin-table.small .table-pinyin, .pinyin-table.small .table-link, .pinyin-table.small th { 

   font-size: 13px;

} .pinyin-table.medium .table-pinyin, .pinyin-table.medium .table-link, .pinyin-table.medium th { 

   font-size: 16px;

} .pinyin-table.large .table-pinyin, .pinyin-table.large .table-link, .pinyin-table.large th { 

   font-size: 24px;

}

.pinyin-table.small th, .pinyin-table.small td { 

   width: 40px;

} .pinyin-table.medium th, .pinyin-table.medium td { 

   width: 50px;

} .pinyin-table.large th, .pinyin-table.large td { 

   width: 70px;

}

.pinyin-table.small .table-ipa, .pinyin-table.small .table-zhuyin, .pinyin-table.small .table-wade-giles { 

   font-size: 10px;

} .pinyin-table.medium .table-ipa, .pinyin-table.medium .table-zhuyin, .pinyin-table.medium .table-wade-giles { 

   font-size: 12px;

} .pinyin-table.large .table-ipa, .pinyin-table.large .table-zhuyin, .pinyin-table.large .table-wade-giles { 

   font-size: 16px;

}

.pinyin-table th.table-selected { 

   background: #DDD;
   cursor: pointer;

}

.pinyin-table th { 

   border-style: solid;
   border-color: rgb(205,205,205);
   border-width: 0px;

} th.first-row:not(.first-col):not(.last-col) { 

   border-bottom-width: 1px;

} th.last-row:not(.first-col):not(.last-col) { 

   border-top-width: 1px;

} th.first-col:not(.first-row):not(.last-row) { 

   border-right-width: 1px;

} th.last-col:not(.first-row):not(.last-row) { 

   border-left-width: 1px;

} .table-highlight { 

   cursor: pointer;

} .pinyin-table.loading-audio td { 

   cursor: wait;

} td.playing-audio * { 

   font-weight: bold;

} .col-a.row-null, .col-a.row-dtnl, .col-a.row-zhchshr, .col-a.row-gkh, .col-o.row-null, .col-o.row-dtnl, .col-o.row-zhchshr, .col-o.row-gkh, .col-u.row-null, .col-u.row-dtnl, .col-u.row-zhchshr, .col-u.row-gkh { 

   background: rgb(255,255,255);

} .col-a.row-null.table-highlight, .col-a.row-dtnl.table-highlight, .col-a.row-zhchshr.table-highlight, .col-a.row-gkh.table-highlight, .col-o.row-null.table-highlight, .col-o.row-dtnl.table-highlight, .col-o.row-zhchshr.table-highlight, .col-o.row-gkh.table-highlight, .col-u.row-null.table-highlight, .col-u.row-dtnl.table-highlight, .col-u.row-zhchshr.table-highlight, .col-u.row-gkh.table-highlight { 

   background: rgba(255,255,255,0.7);

} .col-a.row-null.table-extra-highlight, .col-a.row-dtnl.table-extra-highlight, .col-a.row-zhchshr.table-extra-highlight, .col-a.row-gkh.table-extra-highlight, .col-o.row-null.table-extra-highlight, .col-o.row-dtnl.table-extra-highlight, .col-o.row-zhchshr.table-extra-highlight, .col-o.row-gkh.table-extra-highlight, .col-u.row-null.table-extra-highlight, .col-u.row-dtnl.table-extra-highlight, .col-u.row-zhchshr.table-extra-highlight, .col-u.row-gkh.table-extra-highlight { 

   background: rgba(255,255,255,0.4);

} .col-a.row-bpmf, .col-a.row-zcs, .col-a.row-jqx, .col-o.row-bpmf, .col-o.row-zcs, .col-o.row-jqx, .col-u.row-bpmf, .col-u.row-zcs, .col-u.row-jqx, .col-e.row-null, .col-e.row-dtnl, .col-e.row-zhchshr, .col-e.row-gkh, .col-i.row-null, .col-i.row-dtnl, .col-i.row-zhchshr, .col-i.row-gkh, .col-v.row-null, .col-v.row-dtnl, .col-v.row-zhchshr, .col-v.row-gkh { 

   background: rgb(240,240,240);

} .col-a.row-bpmf.table-highlight, .col-a.row-zcs.table-highlight, .col-a.row-jqx.table-highlight, .col-o.row-bpmf.table-highlight, .col-o.row-zcs.table-highlight, .col-o.row-jqx.table-highlight, .col-u.row-bpmf.table-highlight, .col-u.row-zcs.table-highlight, .col-u.row-jqx.table-highlight, .col-e.row-null.table-highlight, .col-e.row-dtnl.table-highlight, .col-e.row-zhchshr.table-highlight, .col-e.row-gkh.table-highlight, .col-i.row-null.table-highlight, .col-i.row-dtnl.table-highlight, .col-i.row-zhchshr.table-highlight, .col-i.row-gkh.table-highlight, .col-v.row-null.table-highlight, .col-v.row-dtnl.table-highlight, .col-v.row-zhchshr.table-highlight, .col-v.row-gkh.table-highlight { 

   background: rgba(240,240,240,0.7);

} .col-a.row-bpmf.table-extra-highlight, .col-a.row-zcs.table-extra-highlight, .col-a.row-jqx.table-extra-highlight, .col-o.row-bpmf.table-extra-highlight, .col-o.row-zcs.table-extra-highlight, .col-o.row-jqx.table-extra-highlight, .col-u.row-bpmf.table-extra-highlight, .col-u.row-zcs.table-extra-highlight, .col-u.row-jqx.table-extra-highlight, .col-e.row-null.table-extra-highlight, .col-e.row-dtnl.table-extra-highlight, .col-e.row-zhchshr.table-extra-highlight, .col-e.row-gkh.table-extra-highlight, .col-i.row-null.table-extra-highlight, .col-i.row-dtnl.table-extra-highlight, .col-i.row-zhchshr.table-extra-highlight, .col-i.row-gkh.table-extra-highlight, .col-v.row-null.table-extra-highlight, .col-v.row-dtnl.table-extra-highlight, .col-v.row-zhchshr.table-extra-highlight, .col-v.row-gkh.table-extra-highlight { 

   background: rgba(240,240,240,0.4);

} .col-e.row-bpmf, .col-e.row-zcs, .col-e.row-jqx, .col-i.row-bpmf, .col-i.row-zcs, .col-i.row-jqx, .col-v.row-bpmf, .col-v.row-zcs, .col-v.row-jqx { 

   background: rgb(234,234,238);

} .col-e.row-bpmf.table-highlight, .col-e.row-zcs.table-highlight, .col-e.row-jqx.table-highlight, .col-i.row-bpmf.table-highlight, .col-i.row-zcs.table-highlight, .col-i.row-jqx.table-highlight, .col-v.row-bpmf.table-highlight, .col-v.row-zcs.table-highlight, .col-v.row-jqx.table-highlight { 

   background: rgba(234,234,238,0.7);

} .col-e.row-bpmf.table-extra-highlight, .col-e.row-zcs.table-extra-highlight, .col-e.row-jqx.table-extra-highlight, .col-i.row-bpmf.table-extra-highlight, .col-i.row-zcs.table-extra-highlight, .col-i.row-jqx.table-extra-highlight, .col-v.row-bpmf.table-extra-highlight, .col-v.row-zcs.table-extra-highlight, .col-v.row-jqx.table-extra-highlight { 

   background: rgba(234,234,238,0.4);

} .first-row.first-col, .first-row.last-col, .last-row.first-col, .last-row.last-col, .first-row.col-a, .first-row.col-o, .first-row.col-u, .last-row.col-a, .last-row.col-o, .last-row.col-u, .first-col.row-null, .first-col.row-dtnl, .first-col.row-zhchshr, .first-col.row-gkh, .last-col.row-null, .last-col.row-dtnl, .last-col.row-zhchshr, .last-col.row-gkh { 

   background: rgb(255,255,255);

} .first-row.col-a.table-highlight, .first-row.col-o.table-highlight, .first-row.col-u.table-highlight, .last-row.col-a.table-highlight, .last-row.col-o.table-highlight, .last-row.col-u.table-highlight, .first-col.row-null.table-highlight, .first-col.row-dtnl.table-highlight, .first-col.row-zhchshr.table-highlight, .first-col.row-gkh.table-highlight, .last-col.row-null.table-highlight, .last-col.row-dtnl.table-highlight, .last-col.row-zhchshr.table-highlight, .last-col.row-gkh.table-highlight { 

   background: rgba(255,255,255,0.7);

} .first-row.col-e, .first-row.col-i, .first-row.col-v, .last-row.col-e, .last-row.col-i, .last-row.col-v, .first-col.row-bpmf, .first-col.row-zcs, .first-col.row-jqx, .last-col.row-bpmf, .last-col.row-zcs, .last-col.row-jqx { 

   background: rgb(245,245,248);

} .first-row.col-e.table-highlight, .first-row.col-i.table-highlight, .first-row.col-v.table-highlight, .last-row.col-e.table-highlight, .last-row.col-i.table-highlight, .last-row.col-v.table-highlight, .first-col.row-bpmf.table-highlight, .first-col.row-zcs.table-highlight, .first-col.row-jqx.table-highlight, .last-col.row-bpmf.table-highlight, .last-col.row-zcs.table-highlight, .last-col.row-jqx.table-highlight { 

   background: rgba(245,245,248,0.7);

}

/* FullScreen modal styling */ .pinyin-chart-modal { 

   box-sizing: border-box;
   position: fixed;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
   background-color: white;
   padding: 20px;
   overflow: auto;

} .hidden-by-pinyin-chart-modal { 

   display: none !important;

} .pinyin-chart-modal-active { 

   width: 100% !important;
   height: 100% !important;
   overflow: hidden !important;

}

</style>

<button id="table-toggle-large-modal">Enter FullScreen</button> Tone: <input type="radio" name="tone" value="1" /> 1 <input type="radio" name="tone" value="2" /> 2 <input type="radio" name="tone" value="3" /> 3 <input type="radio" name="tone" value="4" /> 4 <input type="radio" name="tone" value="1234" checked />1234 [<a id="additional-settings-collapse" href="#">Show more Settings</a>]

Additional Settings

Show Text: <input type="checkbox" id="table-toggle-ipa" /> IPA <input type="checkbox" id="table-toggle-zhuyin" /> Zhuyin <input type="checkbox" id="table-toggle-wade-giles" /> Wade-Giles

Text Size: <input type="radio" name="text-size" value="small"/> Small <input type="radio" name="text-size" value="medium" checked/> Medium <input type="radio" name="text-size" value="large"/> Large

Chart Mode: <input type="radio" name="chart-mode" value="audio" checked/> Audio <input type="radio" name="chart-mode" value="link"/> Links (disables audio)

-a- -a -ai -ao -an -ang -e- -e -ei -en -eng -er -o- -o -ou -ong -i- -i -i* -ia -iao -ie -iou -ian -iang -in -ing -iong -u- -u -ua -uai -uei -uo -uan -uang -uen -ueng -ü- -ü -üe -üan -ün
∅-
a
<a href=http://resources.allsetlearning.com/chinese/pronunciation/a>a</a>
[ɑ]
ㄚ
a
ai
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ai>ai</a>
[aɪ̯]
ㄞ
ai
ao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ao>ao</a>
[ɑʊ̯]
ㄠ
ao
an
<a href=http://resources.allsetlearning.com/chinese/pronunciation/an>an</a>
[an]
ㄢ
an
ang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ang>ang</a>
[ɑŋ]
ㄤ
ang
e
<a href=http://resources.allsetlearning.com/chinese/pronunciation/e>e</a>
[ɯ̯ʌ]
ㄜ
e
ei
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ei>ei</a>
[eɪ̯]
ㄟ
ei
en
<a href=http://resources.allsetlearning.com/chinese/pronunciation/en>en</a>
[ən]
ㄣ
en
eng
<a href=http://resources.allsetlearning.com/chinese/pronunciation/eng>eng</a>
[əŋ]
ㄥ
eng
er
<a href=http://resources.allsetlearning.com/chinese/pronunciation/er>er</a>
[ɑɻ]
ㄦ
erh
o
<a href=http://resources.allsetlearning.com/chinese/pronunciation/o>o</a>
[ɔ]
ㄛ
o
ou
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ou>ou</a>
[ɤʊ̯]
ㄡ
ou
yi
<a href=http://resources.allsetlearning.com/chinese/pronunciation/yi>yi</a>
[i]
ㄧ
i
ya
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ya>ya</a>
[i̯ɑ]
ㄧㄚ
ya
yao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/yao>yao</a>
[i̯ɑʊ̯]
ㄧㄠ
yao
ye
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ye>ye</a>
[iɛ]
ㄧㄝ
yeh
you
<a href=http://resources.allsetlearning.com/chinese/pronunciation/you>you</a>
[i̯ɤʊ̯]
ㄧㄡ
yu
yan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/yan>yan</a>
[iɛn]
ㄧㄢ
yan
yang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/yang>yang</a>
[i̯ɑŋ]
ㄧㄤ
yang
yin
<a href=http://resources.allsetlearning.com/chinese/pronunciation/yin>yin</a>
[in]
ㄧㄣ
yin
ying
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ying>ying</a>
[iŋ]
ㄧㄥ
ying
yong
<a href=http://resources.allsetlearning.com/chinese/pronunciation/yong>yong</a>
ㄩㄥ
yung
wu
<a href=http://resources.allsetlearning.com/chinese/pronunciation/wu>wu</a>
[u]
ㄨ
wu
wa
<a href=http://resources.allsetlearning.com/chinese/pronunciation/wa>wa</a>
[u̯ɑ]
ㄨㄚ
wa
wai
<a href=http://resources.allsetlearning.com/chinese/pronunciation/wai>wai</a>
[u̯aɪ̯]
ㄨㄞ
wai
wei
<a href=http://resources.allsetlearning.com/chinese/pronunciation/wei>wei</a>
[u̯eɪ̯]
ㄨㄟ
wei
wo
<a href=http://resources.allsetlearning.com/chinese/pronunciation/wo>wo</a>
[u̯ɔ]
ㄨㄛ
wo
wan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/wan>wan</a>
[u̯an]
ㄨㄢ
wan
wang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/wang>wang</a>
[u̯ɑŋ]
ㄨㄤ
wang
wen
<a href=http://resources.allsetlearning.com/chinese/pronunciation/wen>wen</a>
[u̯ən]
ㄨㄣ
wen
weng
<a href=http://resources.allsetlearning.com/chinese/pronunciation/weng>weng</a>
[u̯əŋ]
ㄨㄥ
weng
yu
<a href=http://resources.allsetlearning.com/chinese/pronunciation/yu>yu</a>
[y]
ㄩ
yü
yue
<a href=http://resources.allsetlearning.com/chinese/pronunciation/yue>yue</a>
[y̯œ]
ㄩㄝ
yüeh
yuan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/yuan>yuan</a>
[y̯ɛn]
ㄩㄢ
yüan
yun
<a href=http://resources.allsetlearning.com/chinese/pronunciation/yun>yun</a>
[yn]
ㄩㄣ
yün
 ∅-
b-
ba
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ba>ba</a>
[pɑ]
ㄅㄚ
pa
bai
<a href=http://resources.allsetlearning.com/chinese/pronunciation/bai>bai</a>
[paɪ̯]
ㄅㄞ
pai
bao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/bao>bao</a>
[pɑʊ̯]
ㄅㄠ
pao
ban
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ban>ban</a>
[pan]
ㄅㄢ
pan
bang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/bang>bang</a>
[pɑŋ]
ㄅㄤ
pang
bei
<a href=http://resources.allsetlearning.com/chinese/pronunciation/bei>bei</a>
[peɪ̯]
ㄅㄟ
pei
ben
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ben>ben</a>
[pən]
ㄅㄣ
pen
beng
<a href=http://resources.allsetlearning.com/chinese/pronunciation/beng>beng</a>
[pəŋ]
ㄅㄥ
peng
bo
<a href=http://resources.allsetlearning.com/chinese/pronunciation/bo>bo</a>
[pu̯ɔ]
ㄅㄛ
po
bi
<a href=http://resources.allsetlearning.com/chinese/pronunciation/bi>bi</a>
[pi]
ㄅㄧ
pi
biao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/biao>biao</a>
[pi̯ɑʊ̯]
ㄅㄧㄠ
piao
bie
<a href=http://resources.allsetlearning.com/chinese/pronunciation/bie>bie</a>
[piɛ]
ㄅㄧㄝ
pieh
bian
<a href=http://resources.allsetlearning.com/chinese/pronunciation/bian>bian</a>
[piɛn]
ㄅㄧㄢ
pien
bin
<a href=http://resources.allsetlearning.com/chinese/pronunciation/bin>bin</a>
[pin]
ㄅㄧㄣ
pin
bing
<a href=http://resources.allsetlearning.com/chinese/pronunciation/bing>bing</a>
[piŋ]
ㄅㄧㄥ
ping
bu
<a href=http://resources.allsetlearning.com/chinese/pronunciation/bu>bu</a>
[pu]
ㄅㄨ
pu
 b-
p-
pa
<a href=http://resources.allsetlearning.com/chinese/pronunciation/pa>pa</a>
[pʰɑ]
ㄆㄚ
p'a
pai
<a href=http://resources.allsetlearning.com/chinese/pronunciation/pai>pai</a>
[pʰaɪ̯]
ㄆㄞ
p'ai
pao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/pao>pao</a>
[pʰɑʊ̯]
ㄆㄠ
p'ao
pan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/pan>pan</a>
[pʰan]
ㄆㄢ
p'an
pang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/pang>pang</a>
[pʰɑŋ]
ㄆㄤ
p'ang
pei
<a href=http://resources.allsetlearning.com/chinese/pronunciation/pei>pei</a>
[pʰeɪ̯]
ㄆㄟ
p'ei
pen
<a href=http://resources.allsetlearning.com/chinese/pronunciation/pen>pen</a>
[pʰən]
ㄆㄣ
p'en
peng
<a href=http://resources.allsetlearning.com/chinese/pronunciation/peng>peng</a>
[pʰəŋ]
ㄆㄥ
p'eng
po
<a href=http://resources.allsetlearning.com/chinese/pronunciation/po>po</a>
[pʰu̯ɔ]
ㄆㄛ
p'o
pou
<a href=http://resources.allsetlearning.com/chinese/pronunciation/pou>pou</a>
[pʰɤʊ̯]
ㄆㄡ
p'ou
pi
<a href=http://resources.allsetlearning.com/chinese/pronunciation/pi>pi</a>
[pʰi]
ㄆㄧ
p'i
piao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/piao>piao</a>
[pʰi̯ɑʊ̯]
ㄆㄧㄠ
p'iao
pie
<a href=http://resources.allsetlearning.com/chinese/pronunciation/pie>pie</a>
[pʰiɛ]
ㄆㄧㄝ
p'ieh
pian
<a href=http://resources.allsetlearning.com/chinese/pronunciation/pian>pian</a>
[pʰiɛn]
ㄆㄧㄢ
p'ien
pin
<a href=http://resources.allsetlearning.com/chinese/pronunciation/pin>pin</a>
[pʰin]
ㄆㄧㄣ
p'in
ping
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ping>ping</a>
[pʰiŋ]
ㄆㄧㄥ
p'ing
pu
<a href=http://resources.allsetlearning.com/chinese/pronunciation/pu>pu</a>
[pʰu]
ㄆㄨ
p'u
 p-
m-
ma
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ma>ma</a>
[mɑ]
ㄇㄚ
ma
mai
<a href=http://resources.allsetlearning.com/chinese/pronunciation/mai>mai</a>
[maɪ̯]
ㄇㄞ
mai
mao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/mao>mao</a>
[mɑʊ̯]
ㄇㄠ
mao
man
<a href=http://resources.allsetlearning.com/chinese/pronunciation/man>man</a>
[man]
ㄇㄢ
man
mang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/mang>mang</a>
[mɑŋ]
ㄇㄤ
mang
me
<a href=http://resources.allsetlearning.com/chinese/pronunciation/me>me</a>
[mɯ̯ʌ]
ㄇㄜ
me
mei
<a href=http://resources.allsetlearning.com/chinese/pronunciation/mei>mei</a>
[meɪ̯]
ㄇㄟ
mei
men
<a href=http://resources.allsetlearning.com/chinese/pronunciation/men>men</a>
[mən]
ㄇㄣ
men
meng
<a href=http://resources.allsetlearning.com/chinese/pronunciation/meng>meng</a>
[məŋ]
ㄇㄥ
meng
mo
<a href=http://resources.allsetlearning.com/chinese/pronunciation/mo>mo</a>
[mu̯ɔ]
ㄇㄛ
mo
mou
<a href=http://resources.allsetlearning.com/chinese/pronunciation/mou>mou</a>
[mɤʊ̯]
ㄇㄡ
mou
mi
<a href=http://resources.allsetlearning.com/chinese/pronunciation/mi>mi</a>
[mi]
ㄇㄧ
mi
miao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/miao>miao</a>
[mi̯ɑʊ̯]
ㄇㄧㄠ
miao
mie
<a href=http://resources.allsetlearning.com/chinese/pronunciation/mie>mie</a>
[miɛ]
ㄇㄧㄝ
mieh
miu
<a href=http://resources.allsetlearning.com/chinese/pronunciation/miu>miu</a>
[mi̯ɤʊ̯]
ㄇㄧㄡ
miu
mian
<a href=http://resources.allsetlearning.com/chinese/pronunciation/mian>mian</a>
[miɛn]
ㄇㄧㄢ
mien
min
<a href=http://resources.allsetlearning.com/chinese/pronunciation/min>min</a>
[min]
ㄇㄧㄣ
min
ming
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ming>ming</a>
[miŋ]
ㄇㄧㄥ
ming
mu
<a href=http://resources.allsetlearning.com/chinese/pronunciation/mu>mu</a>
[mu]
ㄇㄨ
mu
 m-
f-
fa
<a href=http://resources.allsetlearning.com/chinese/pronunciation/fa>fa</a>
[fɑ]
ㄈㄚ
fa
fan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/fan>fan</a>
[fan]
ㄈㄢ
fan
fang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/fang>fang</a>
[fɑŋ]
ㄈㄤ
fang
fei
<a href=http://resources.allsetlearning.com/chinese/pronunciation/fei>fei</a>
[feɪ̯]
ㄈㄟ
fei
fen
<a href=http://resources.allsetlearning.com/chinese/pronunciation/fen>fen</a>
[fən]
ㄈㄣ
fen
feng
<a href=http://resources.allsetlearning.com/chinese/pronunciation/feng>feng</a>
[fəŋ]
ㄈㄥ
feng
fo
<a href=http://resources.allsetlearning.com/chinese/pronunciation/fo>fo</a>
[fu̯ɔ]
ㄈㄛ
fo
fou
<a href=http://resources.allsetlearning.com/chinese/pronunciation/fou>fou</a>
[fɤʊ̯]
ㄈㄡ
fou
fu
<a href=http://resources.allsetlearning.com/chinese/pronunciation/fu>fu</a>
[fu]
ㄈㄨ
fu
 f-
d-
da
<a href=http://resources.allsetlearning.com/chinese/pronunciation/da>da</a>
[tɑ]
ㄉㄚ
ta
dai
<a href=http://resources.allsetlearning.com/chinese/pronunciation/dai>dai</a>
[taɪ̯]
ㄉㄞ
tai
dao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/dao>dao</a>
[tɑʊ̯]
ㄉㄠ
tao
dan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/dan>dan</a>
[tan]
ㄉㄢ
tan
dang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/dang>dang</a>
[tɑŋ]
ㄉㄤ
tang
de
<a href=http://resources.allsetlearning.com/chinese/pronunciation/de>de</a>
[tɯ̯ʌ]
ㄉㄜ
te
dei
<a href=http://resources.allsetlearning.com/chinese/pronunciation/dei>dei</a>
[teɪ̯]
ㄉㄟ
tei
den
<a href=http://resources.allsetlearning.com/chinese/pronunciation/den>den</a>
[tən]
ㄉㄣ
ten
deng
<a href=http://resources.allsetlearning.com/chinese/pronunciation/deng>deng</a>
[təŋ]
ㄉㄥ
teng
dou
<a href=http://resources.allsetlearning.com/chinese/pronunciation/dou>dou</a>
[tɤʊ̯]
ㄉㄡ
tou
dong
<a href=http://resources.allsetlearning.com/chinese/pronunciation/dong>dong</a>
[tʊŋ]
ㄉㄨㄥ
tung
di
<a href=http://resources.allsetlearning.com/chinese/pronunciation/di>di</a>
[ti]
ㄉㄧ
ti
diao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/diao>diao</a>
[ti̯ɑʊ̯]
ㄉㄧㄠ
tiao
die
<a href=http://resources.allsetlearning.com/chinese/pronunciation/die>die</a>
[tiɛ]
ㄉㄧㄝ
tieh
diu
<a href=http://resources.allsetlearning.com/chinese/pronunciation/diu>diu</a>
[ti̯ɤʊ̯]
ㄉㄧㄡ
tiu
dian
<a href=http://resources.allsetlearning.com/chinese/pronunciation/dian>dian</a>
[tiɛn]
ㄉㄧㄢ
tien
ding
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ding>ding</a>
[tiŋ]
ㄉㄧㄥ
ting
du
<a href=http://resources.allsetlearning.com/chinese/pronunciation/du>du</a>
[tu]
ㄉㄨ
tu
dui
<a href=http://resources.allsetlearning.com/chinese/pronunciation/dui>dui</a>
[tu̯eɪ̯]
ㄉㄨㄟ
tui
duo
<a href=http://resources.allsetlearning.com/chinese/pronunciation/duo>duo</a>
[tu̯ɔ]
ㄉㄨㄛ
to
duan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/duan>duan</a>
[tu̯an]
ㄉㄨㄢ
tuan
dun
<a href=http://resources.allsetlearning.com/chinese/pronunciation/dun>dun</a>
[tu̯ən]
ㄉㄨㄣ
tun
 d-
t-
ta
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ta>ta</a>
[tʰɑ]
ㄊㄚ
t'a
tai
<a href=http://resources.allsetlearning.com/chinese/pronunciation/tai>tai</a>
[tʰaɪ̯]
ㄊㄞ
t'ai
tao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/tao>tao</a>
[tʰɑʊ̯]
ㄊㄠ
t'ao
tan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/tan>tan</a>
[tʰan]
ㄊㄢ
t'an
tang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/tang>tang</a>
[tʰɑŋ]
ㄊㄤ
t'ang
te
<a href=http://resources.allsetlearning.com/chinese/pronunciation/te>te</a>
[tʰɯ̯ʌ]
ㄊㄜ
t'e
teng
<a href=http://resources.allsetlearning.com/chinese/pronunciation/teng>teng</a>
[tʰəŋ]
ㄊㄥ
t'eng
tou
<a href=http://resources.allsetlearning.com/chinese/pronunciation/tou>tou</a>
[tʰɤʊ̯]
ㄊㄡ
t'ou
tong
<a href=http://resources.allsetlearning.com/chinese/pronunciation/tong>tong</a>
[tʰʊŋ]
ㄊㄨㄥ
t'ung
ti
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ti>ti</a>
[tʰi]
ㄊㄧ
t'i
tiao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/tiao>tiao</a>
[tʰi̯ɑʊ̯]
ㄊㄧㄠ
t'iao
tie
<a href=http://resources.allsetlearning.com/chinese/pronunciation/tie>tie</a>
[tʰiɛ]
ㄊㄧㄝ
t'ieh
tian
<a href=http://resources.allsetlearning.com/chinese/pronunciation/tian>tian</a>
[tʰiɛn]
ㄊㄧㄢ
t'ien
ting
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ting>ting</a>
[tʰiŋ]
ㄊㄧㄥ
t'ing
tu
<a href=http://resources.allsetlearning.com/chinese/pronunciation/tu>tu</a>
[tʰu]
ㄊㄨ
t'u
tui
<a href=http://resources.allsetlearning.com/chinese/pronunciation/tui>tui</a>
[tʰu̯eɪ̯]
ㄊㄨㄟ
t'ui
tuo
<a href=http://resources.allsetlearning.com/chinese/pronunciation/tuo>tuo</a>
[tʰu̯ɔ]
ㄊㄨㄛ
t'o
tuan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/tuan>tuan</a>
[tʰu̯an]
ㄊㄨㄢ
t'uan
tun
<a href=http://resources.allsetlearning.com/chinese/pronunciation/tun>tun</a>
[tʰu̯ən]
ㄊㄨㄣ
t'un
 t-
n-
na
<a href=http://resources.allsetlearning.com/chinese/pronunciation/na>na</a>
[nɑ]
ㄋㄚ
na
nai
<a href=http://resources.allsetlearning.com/chinese/pronunciation/nai>nai</a>
[naɪ̯]
ㄋㄞ
nai
nao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/nao>nao</a>
[nɑʊ̯]
ㄋㄠ
nao
nan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/nan>nan</a>
[nan]
ㄋㄢ
nan
nang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/nang>nang</a>
[nɑŋ]
ㄋㄤ
nang
ne
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ne>ne</a>
[nɯ̯ʌ]
ㄋㄜ
ne
nei
<a href=http://resources.allsetlearning.com/chinese/pronunciation/nei>nei</a>
[neɪ̯]
ㄋㄟ
nei
nen
<a href=http://resources.allsetlearning.com/chinese/pronunciation/nen>nen</a>
[nən]
ㄋㄣ
nen
neng
<a href=http://resources.allsetlearning.com/chinese/pronunciation/neng>neng</a>
[nəŋ]
ㄋㄥ
neng
nou
<a href=http://resources.allsetlearning.com/chinese/pronunciation/nou>nou</a>
[nɤʊ̯]
ㄋㄡ
nou
nong
<a href=http://resources.allsetlearning.com/chinese/pronunciation/nong>nong</a>
[nʊŋ]
ㄋㄨㄥ
nung
ni
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ni>ni</a>
[ni]
ㄋㄧ
ni
niao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/niao>niao</a>
[ni̯ɑʊ̯]
ㄋㄧㄠ
niao
nie
<a href=http://resources.allsetlearning.com/chinese/pronunciation/nie>nie</a>
[niɛ]
ㄋㄧㄝ
nieh
niu
<a href=http://resources.allsetlearning.com/chinese/pronunciation/niu>niu</a>
[ni̯ɤʊ̯]
ㄋㄧㄡ
niu
nian
<a href=http://resources.allsetlearning.com/chinese/pronunciation/nian>nian</a>
[niɛn]
ㄋㄧㄢ
nien
niang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/niang>niang</a>
[ni̯ɑŋ]
ㄋㄧㄤ
niang
nin
<a href=http://resources.allsetlearning.com/chinese/pronunciation/nin>nin</a>
[nin]
ㄋㄧㄣ
nin
ning
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ning>ning</a>
[niŋ]
ㄋㄧㄥ
ning
nu
<a href=http://resources.allsetlearning.com/chinese/pronunciation/nu>nu</a>
[nu]
ㄋㄨ
nu
nuo
<a href=http://resources.allsetlearning.com/chinese/pronunciation/nuo>nuo</a>
[nu̯ɔ]
ㄋㄨㄛ
no
nuan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/nuan>nuan</a>
[nu̯an]
ㄋㄨㄢ
nuan
nü
<a href=http://resources.allsetlearning.com/chinese/pronunciation/nü>nü</a>
[ny]
ㄋㄩ
nü
nüe
<a href=http://resources.allsetlearning.com/chinese/pronunciation/nüe>nüe</a>
[ny̯œ]
ㄋㄩㄝ
nüeh
 n-
l-
la
<a href=http://resources.allsetlearning.com/chinese/pronunciation/la>la</a>
[lɑ]
ㄌㄚ
la
lai
<a href=http://resources.allsetlearning.com/chinese/pronunciation/lai>lai</a>
[laɪ̯]
ㄌㄞ
lai
lao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/lao>lao</a>
[lɑʊ̯]
ㄌㄠ
lao
lan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/lan>lan</a>
[lan]
ㄌㄢ
lan
lang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/lang>lang</a>
[lɑŋ]
ㄌㄤ
lang
le
<a href=http://resources.allsetlearning.com/chinese/pronunciation/le>le</a>
[lɯ̯ʌ]
ㄌㄜ
le
lei
<a href=http://resources.allsetlearning.com/chinese/pronunciation/lei>lei</a>
[leɪ̯]
ㄌㄟ
lei
leng
<a href=http://resources.allsetlearning.com/chinese/pronunciation/leng>leng</a>
[ləŋ]
ㄌㄥ
leng
lo
<a href=http://resources.allsetlearning.com/chinese/pronunciation/lo>lo</a>
[lu̯ɔ]
ㄌㄛ
lo
lou
<a href=http://resources.allsetlearning.com/chinese/pronunciation/lou>lou</a>
[lɤʊ̯]
ㄌㄡ
lou
long
<a href=http://resources.allsetlearning.com/chinese/pronunciation/long>long</a>
[lʊŋ]
ㄌㄨㄥ
lung
li
<a href=http://resources.allsetlearning.com/chinese/pronunciation/li>li</a>
[li]
ㄌㄧ
li
lia
<a href=http://resources.allsetlearning.com/chinese/pronunciation/lia>lia</a>
[li̯ɑ]
ㄌㄧㄚ
lia
liao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/liao>liao</a>
[li̯ɑʊ̯]
ㄌㄧㄠ
liao
lie
<a href=http://resources.allsetlearning.com/chinese/pronunciation/lie>lie</a>
[liɛ]
ㄌㄧㄝ
lieh
liu
<a href=http://resources.allsetlearning.com/chinese/pronunciation/liu>liu</a>
[li̯ɤʊ̯]
ㄌㄧㄡ
liu
lian
<a href=http://resources.allsetlearning.com/chinese/pronunciation/lian>lian</a>
[liɛn]
ㄌㄧㄢ
lien
liang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/liang>liang</a>
[li̯ɑŋ]
ㄌㄧㄤ
liang
lin
<a href=http://resources.allsetlearning.com/chinese/pronunciation/lin>lin</a>
[lin]
ㄌㄧㄣ
lin
ling
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ling>ling</a>
[liŋ]
ㄌㄧㄥ
ling
lu
<a href=http://resources.allsetlearning.com/chinese/pronunciation/lu>lu</a>
[lu]
ㄌㄨ
lu
luo
<a href=http://resources.allsetlearning.com/chinese/pronunciation/luo>luo</a>
[lu̯ɔ]
ㄌㄨㄛ
lo
luan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/luan>luan</a>
[lu̯an]
ㄌㄨㄢ
luan
lun
<a href=http://resources.allsetlearning.com/chinese/pronunciation/lun>lun</a>
[lu̯ən]
ㄌㄨㄣ
lun
lü
<a href=http://resources.allsetlearning.com/chinese/pronunciation/lü>lü</a>
[ly]
ㄌㄩ
lü
lüe
<a href=http://resources.allsetlearning.com/chinese/pronunciation/lüe>lüe</a>
[ly̯œ]
ㄌㄩㄝ
lüeh
 l-
z-
za
<a href=http://resources.allsetlearning.com/chinese/pronunciation/za>za</a>
[tsɑ]
ㄗㄚ
tsa
zai
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zai>zai</a>
[tsaɪ̯]
ㄗㄞ
tsai
zao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zao>zao</a>
[tsɑʊ̯]
ㄗㄠ
tsao
zan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zan>zan</a>
[tsan]
ㄗㄢ
tsan
zang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zang>zang</a>
[tsɑŋ]
ㄗㄤ
tsang
ze
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ze>ze</a>
[tsɯ̯ʌ]
ㄗㄜ
tse
zei
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zei>zei</a>
[tseɪ̯]
ㄗㄟ
tsei
zen
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zen>zen</a>
[tsən]
ㄗㄣ
tsen
zeng
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zeng>zeng</a>
[tsəŋ]
ㄗㄥ
tseng
zou
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zou>zou</a>
[tsɤʊ̯]
ㄗㄡ
tsou
zong
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zong>zong</a>
[tsʊŋ]
ㄗㄨㄥ
tsung
zi
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zi>zi</a>
[tsɿ]
ㄗ
tzu
zu
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zu>zu</a>
[tsu]
ㄗㄨ
tsu
zui
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zui>zui</a>
[tsu̯eɪ̯]
ㄗㄨㄟ
tsui
zuo
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zuo>zuo</a>
[tsu̯ɔ]
ㄗㄨㄛ
tso
zuan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zuan>zuan</a>
[tsu̯an]
ㄗㄨㄢ
tsuan
zun
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zun>zun</a>
[tsu̯ən]
ㄗㄨㄣ
tsun
 z-
c-
ca
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ca>ca</a>
[tsʰɑ]
ㄘㄚ
ts'a
cai
<a href=http://resources.allsetlearning.com/chinese/pronunciation/cai>cai</a>
[tsʰaɪ̯]
ㄘㄞ
ts'ai
cao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/cao>cao</a>
[tsʰɑʊ̯]
ㄘㄠ
ts'ao
can
<a href=http://resources.allsetlearning.com/chinese/pronunciation/can>can</a>
[tsʰan]
ㄘㄢ
ts'an
cang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/cang>cang</a>
[tsʰɑŋ]
ㄘㄤ
ts'ang
ce
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ce>ce</a>
[tsʰɯ̯ʌ]
ㄘㄜ
ts'e
cei
<a href=http://resources.allsetlearning.com/chinese/pronunciation/cei>cei</a>
[tsʰeɪ̯]
ㄘㄟ
ts'ei
cen
<a href=http://resources.allsetlearning.com/chinese/pronunciation/cen>cen</a>
[tsʰən]
ㄘㄣ
ts'en
ceng
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ceng>ceng</a>
[tsʰəŋ]
ㄘㄥ
ts'eng
cou
<a href=http://resources.allsetlearning.com/chinese/pronunciation/cou>cou</a>
[tsʰɤʊ̯]
ㄘㄡ
ts'ou
cong
<a href=http://resources.allsetlearning.com/chinese/pronunciation/cong>cong</a>
[tsʰʊŋ]
ㄘㄨㄥ
ts'ung
ci
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ci>ci</a>
[tsʰɿ]
ㄘ
tz'u
cu
<a href=http://resources.allsetlearning.com/chinese/pronunciation/cu>cu</a>
[tsʰu]
ㄘㄨ
ts'u
cui
<a href=http://resources.allsetlearning.com/chinese/pronunciation/cui>cui</a>
[tsʰu̯eɪ̯]
ㄘㄨㄟ
ts'ui
cuo
<a href=http://resources.allsetlearning.com/chinese/pronunciation/cuo>cuo</a>
[tsʰu̯ɔ]
ㄘㄨㄛ
ts'o
cuan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/cuan>cuan</a>
[tsʰu̯an]
ㄘㄨㄢ
ts'uan
cun
<a href=http://resources.allsetlearning.com/chinese/pronunciation/cun>cun</a>
[tsʰu̯ən]
ㄘㄨㄣ
ts'un
 c-
s-
sa
<a href=http://resources.allsetlearning.com/chinese/pronunciation/sa>sa</a>
[sɑ]
ㄙㄚ
sa
sai
<a href=http://resources.allsetlearning.com/chinese/pronunciation/sai>sai</a>
[saɪ̯]
ㄙㄞ
sai
sao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/sao>sao</a>
[sɑʊ̯]
ㄙㄠ
sao
san
<a href=http://resources.allsetlearning.com/chinese/pronunciation/san>san</a>
[san]
ㄙㄢ
san
sang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/sang>sang</a>
[sɑŋ]
ㄙㄤ
sang
se
<a href=http://resources.allsetlearning.com/chinese/pronunciation/se>se</a>
[sɯ̯ʌ]
ㄙㄜ
se
sen
<a href=http://resources.allsetlearning.com/chinese/pronunciation/sen>sen</a>
[sən]
ㄙㄣ
sen
seng
<a href=http://resources.allsetlearning.com/chinese/pronunciation/seng>seng</a>
[səŋ]
ㄙㄥ
seng
sou
<a href=http://resources.allsetlearning.com/chinese/pronunciation/sou>sou</a>
[sɤʊ̯]
ㄙㄡ
sou
song
<a href=http://resources.allsetlearning.com/chinese/pronunciation/song>song</a>
[sʊŋ]
ㄙㄨㄥ
sung
si
<a href=http://resources.allsetlearning.com/chinese/pronunciation/si>si</a>
[sɿ]
ㄙ
ssu
su
<a href=http://resources.allsetlearning.com/chinese/pronunciation/su>su</a>
[su]
ㄙㄨ
su
sui
<a href=http://resources.allsetlearning.com/chinese/pronunciation/sui>sui</a>
[su̯eɪ̯]
ㄙㄨㄟ
sui
suo
<a href=http://resources.allsetlearning.com/chinese/pronunciation/suo>suo</a>
[su̯ɔ]
ㄙㄨㄛ
so
suan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/suan>suan</a>
[su̯an]
ㄙㄨㄢ
suan
sun
<a href=http://resources.allsetlearning.com/chinese/pronunciation/sun>sun</a>
[su̯ən]
ㄙㄨㄣ
sun
 s-
zh-
zha
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zha>zha</a>
[tʂɑ]
ㄓㄚ
cha
zhai
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zhai>zhai</a>
[tʂaɪ̯]
ㄓㄞ
chai
zhao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zhao>zhao</a>
[tʂɑʊ̯]
ㄓㄠ
chao
zhan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zhan>zhan</a>
[tʂan]
ㄓㄢ
chan
zhang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zhang>zhang</a>
[tʂɑŋ]
ㄓㄤ
chang
zhe
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zhe>zhe</a>
[tʂɯ̯ʌ]
ㄓㄜ
che
zhei
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zhei>zhei</a>
[tʂeɪ̯]
ㄓㄟ
chei
zhen
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zhen>zhen</a>
[tʂən]
ㄓㄣ
chen
zheng
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zheng>zheng</a>
[tʂəŋ]
ㄓㄥ
cheng
zhou
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zhou>zhou</a>
[tʂɤʊ̯]
ㄓㄡ
chou
zhong
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zhong>zhong</a>
[tʂʊŋ]
ㄓㄨㄥ
chung
zhi
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zhi>zhi</a>
[tʂʅ]
ㄓ
chih
zhu
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zhu>zhu</a>
[tʂu]
ㄓㄨ
chu
zhua
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zhua>zhua</a>
[tʂu̯ɑ]
ㄓㄨㄚ
chua
zhuai
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zhuai>zhuai</a>
[tʂu̯aɪ̯]
ㄓㄨㄞ
chuai
zhui
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zhui>zhui</a>
[tʂu̯eɪ̯]
ㄓㄨㄟ
chui
zhuo
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zhuo>zhuo</a>
[tʂu̯ɔ]
ㄓㄨㄛ
cho
zhuan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zhuan>zhuan</a>
[tʂu̯an]
ㄓㄨㄢ
chuan
zhuang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zhuang>zhuang</a>
[tʂ̯u̯ɑŋ]
ㄓㄨㄤ
chuang
zhun
<a href=http://resources.allsetlearning.com/chinese/pronunciation/zhun>zhun</a>
[tʂu̯ən]
ㄓㄨㄣ
chun
 zh-
ch-
cha
<a href=http://resources.allsetlearning.com/chinese/pronunciation/cha>cha</a>
[tʂʰɑ]
ㄔㄚ
ch'a
chai
<a href=http://resources.allsetlearning.com/chinese/pronunciation/chai>chai</a>
[tʂʰaɪ̯]
ㄔㄞ
ch'ai
chao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/chao>chao</a>
[tʂʰɑʊ̯]
ㄔㄠ
ch'ao
chan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/chan>chan</a>
[tʂʰan]
ㄔㄢ
ch'an
chang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/chang>chang</a>
[tʂʰɑŋ]
ㄔㄤ
ch'ang
che
<a href=http://resources.allsetlearning.com/chinese/pronunciation/che>che</a>
[tʂʰɯ̯ʌ]
ㄔㄜ
ch'e
chen
<a href=http://resources.allsetlearning.com/chinese/pronunciation/chen>chen</a>
[tʂʰən]
ㄔㄣ
ch'en
cheng
<a href=http://resources.allsetlearning.com/chinese/pronunciation/cheng>cheng</a>
[tʂʰəŋ]
ㄔㄥ
ch'eng
chou
<a href=http://resources.allsetlearning.com/chinese/pronunciation/chou>chou</a>
[tʂʰɤʊ̯]
ㄔㄡ
ch'ou
chong
<a href=http://resources.allsetlearning.com/chinese/pronunciation/chong>chong</a>
[tʂʰʊŋ]
ㄔㄨㄥ
ch'ung
chi
<a href=http://resources.allsetlearning.com/chinese/pronunciation/chi>chi</a>
[tʂʰʅ]
ㄔ
ch'ih
chu
<a href=http://resources.allsetlearning.com/chinese/pronunciation/chu>chu</a>
[tʂʰu]
ㄔㄨ
ch'u
chua
<a href=http://resources.allsetlearning.com/chinese/pronunciation/chua>chua</a>
[tʂʰu̯ɑ]
ㄔㄨㄚ
ch'ua
chuai
<a href=http://resources.allsetlearning.com/chinese/pronunciation/chuai>chuai</a>
[tʂʰu̯aɪ̯]
ㄔㄨㄞ
ch'uai
chui
<a href=http://resources.allsetlearning.com/chinese/pronunciation/chui>chui</a>
[tʂʰu̯eɪ̯]
ㄔㄨㄟ
ch'ui
chuo
<a href=http://resources.allsetlearning.com/chinese/pronunciation/chuo>chuo</a>
[tʂʰu̯ɔ]
ㄔㄨㄛ
ch'o
chuan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/chuan>chuan</a>
[tʂʰu̯an]
ㄔㄨㄢ
ch'uan
chuang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/chuang>chuang</a>
[tʂʰu̯ɑŋ]
ㄔㄨㄤ
ch'uang
chun
<a href=http://resources.allsetlearning.com/chinese/pronunciation/chun>chun</a>
[tʂʰu̯ən]
ㄔㄨㄣ
ch'un
 ch-
sh-
sha
<a href=http://resources.allsetlearning.com/chinese/pronunciation/sha>sha</a>
[ʂɑ]
ㄕㄚ
sha
shai
<a href=http://resources.allsetlearning.com/chinese/pronunciation/shai>shai</a>
[ʂaɪ̯]
ㄕㄞ
shai
shao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/shao>shao</a>
[ʂɑʊ̯]
ㄕㄠ
shao
shan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/shan>shan</a>
[ʂan]
ㄕㄢ
shan
shang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/shang>shang</a>
[ʂɑŋ]
ㄕㄤ
shang
she
<a href=http://resources.allsetlearning.com/chinese/pronunciation/she>she</a>
[ʂɯ̯ʌ]
ㄕㄜ
she
shei
<a href=http://resources.allsetlearning.com/chinese/pronunciation/shei>shei</a>
[ʂeɪ̯]
ㄕㄟ
shei
shen
<a href=http://resources.allsetlearning.com/chinese/pronunciation/shen>shen</a>
[ʂən]
ㄕㄣ
shen
sheng
<a href=http://resources.allsetlearning.com/chinese/pronunciation/sheng>sheng</a>
[ʂəŋ]
ㄕㄥ
sheng
shou
<a href=http://resources.allsetlearning.com/chinese/pronunciation/shou>shou</a>
[ʂɤʊ̯]
ㄕㄡ
shou
shi
<a href=http://resources.allsetlearning.com/chinese/pronunciation/shi>shi</a>
[ʂʅ]
ㄕ
shih
shu
<a href=http://resources.allsetlearning.com/chinese/pronunciation/shu>shu</a>
[ʂu]
ㄕㄨ
shu
shua
<a href=http://resources.allsetlearning.com/chinese/pronunciation/shua>shua</a>
[ʂu̯ɑ]
ㄕㄨㄚ
shua
shuai
<a href=http://resources.allsetlearning.com/chinese/pronunciation/shuai>shuai</a>
[ʂu̯aɪ̯]
ㄕㄨㄞ
shuai
shui
<a href=http://resources.allsetlearning.com/chinese/pronunciation/shui>shui</a>
[ʂu̯eɪ̯]
ㄕㄨㄟ
shui
shuo
<a href=http://resources.allsetlearning.com/chinese/pronunciation/shuo>shuo</a>
[ʂu̯ɔ]
ㄕㄨㄛ
sho
shuan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/shuan>shuan</a>
[ʂu̯an]
ㄕㄨㄢ
shuan
shuang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/shuang>shuang</a>
[ʂu̯ɑŋ]
ㄕㄨㄤ
shuang
shun
<a href=http://resources.allsetlearning.com/chinese/pronunciation/shun>shun</a>
[ʂu̯ən]
ㄕㄨㄣ
shun
 sh-
r-
rao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/rao>rao</a>
[ʐɑʊ̯]
ㄖㄠ
jao
ran
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ran>ran</a>
[ʐan]
ㄖㄢ
jan
rang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/rang>rang</a>
[ʐɑŋ]
ㄖㄤ
jang
re
<a href=http://resources.allsetlearning.com/chinese/pronunciation/re>re</a>
[ʐɯ̯ʌ]
ㄖㄜ
je
ren
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ren>ren</a>
[ʐən]
ㄖㄣ
jen
reng
<a href=http://resources.allsetlearning.com/chinese/pronunciation/reng>reng</a>
[ʐəŋ]
ㄖㄥ
jeng
rou
<a href=http://resources.allsetlearning.com/chinese/pronunciation/rou>rou</a>
[ʐɤʊ̯]
ㄖㄡ
jou
rong
<a href=http://resources.allsetlearning.com/chinese/pronunciation/rong>rong</a>
[ʐʊŋ]
ㄖㄨㄥ
jung
ri
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ri>ri</a>
[ʐʅ]
ㄖ
jih
ru
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ru>ru</a>
[ʐu]
ㄖㄨ
ju
rua
<a href=http://resources.allsetlearning.com/chinese/pronunciation/rua>rua</a>
[ʐu̯ɑ]
ㄖㄨㄚ
jua
rui
<a href=http://resources.allsetlearning.com/chinese/pronunciation/rui>rui</a>
[ʐu̯eɪ̯]
ㄖㄨㄟ
jui
ruo
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ruo>ruo</a>
[ʐu̯ɔ]
ㄖㄨㄛ
jo
ruan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ruan>ruan</a>
[ʐu̯an]
ㄖㄨㄢ
juan
run
<a href=http://resources.allsetlearning.com/chinese/pronunciation/run>run</a>
[ʐu̯ən]
ㄖㄨㄣ
jun
 r-
j-
ji
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ji>ji</a>
[tɕi]
ㄐㄧ
chi
jia
<a href=http://resources.allsetlearning.com/chinese/pronunciation/jia>jia</a>
[tɕi̯ɑ]
ㄐㄧㄚ
chia
jiao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/jiao>jiao</a>
[tɕi̯ɑʊ̯]
ㄐㄧㄠ
chiao
jie
<a href=http://resources.allsetlearning.com/chinese/pronunciation/jie>jie</a>
[tɕiɛ]
ㄐㄧㄝ
chieh
jiu
<a href=http://resources.allsetlearning.com/chinese/pronunciation/jiu>jiu</a>
[tɕi̯ɤʊ̯]
ㄐㄧㄡ
chiu
jian
<a href=http://resources.allsetlearning.com/chinese/pronunciation/jian>jian</a>
[tɕiɛn]
ㄐㄧㄢ
chien
jiang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/jiang>jiang</a>
[tɕi̯ɑŋ]
ㄐㄧㄤ
chiang
jin
<a href=http://resources.allsetlearning.com/chinese/pronunciation/jin>jin</a>
[tɕin]
ㄐㄧㄣ
chin
jing
<a href=http://resources.allsetlearning.com/chinese/pronunciation/jing>jing</a>
[tɕiŋ]
ㄐㄧㄥ
ching
jiong
<a href=http://resources.allsetlearning.com/chinese/pronunciation/jiong>jiong</a>
[tɕi̯ʊŋ]
ㄐㄩㄥ
chiung
ju
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ju>ju</a>
[tɕy]
ㄐㄩ
chü
jue
<a href=http://resources.allsetlearning.com/chinese/pronunciation/jue>jue</a>
[tɕy̯œ]
ㄐㄩㄝ
chüeh
juan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/juan>juan</a>
[tɕy̯ɛn]
ㄐㄩㄢ
chüan
jun
<a href=http://resources.allsetlearning.com/chinese/pronunciation/jun>jun</a>
[tɕyn]
ㄐㄩㄣ
chün
 j-
q-
qi
<a href=http://resources.allsetlearning.com/chinese/pronunciation/qi>qi</a>
[tɕʰi]
ㄑㄧ
ch'i
qia
<a href=http://resources.allsetlearning.com/chinese/pronunciation/qia>qia</a>
[tɕʰi̯ɑ]
ㄑㄧㄚ
ch'ia
qiao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/qiao>qiao</a>
[tɕʰi̯ɑʊ̯]
ㄑㄧㄠ
ch'iao
qie
<a href=http://resources.allsetlearning.com/chinese/pronunciation/qie>qie</a>
[tɕʰiɛ]
ㄑㄧㄝ
ch'ieh
qiu
<a href=http://resources.allsetlearning.com/chinese/pronunciation/qiu>qiu</a>
[tɕʰi̯ɤʊ̯]
ㄑㄧㄡ
ch'iu
qian
<a href=http://resources.allsetlearning.com/chinese/pronunciation/qian>qian</a>
[tɕʰiɛn]
ㄑㄧㄢ
ch'ien
qiang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/qiang>qiang</a>
[tɕʰi̯ɑŋ]
ㄑㄧㄤ
ch'iang
qin
<a href=http://resources.allsetlearning.com/chinese/pronunciation/qin>qin</a>
[tɕʰin]
ㄑㄧㄣ
ch'in
qing
<a href=http://resources.allsetlearning.com/chinese/pronunciation/qing>qing</a>
[tɕʰiŋ]
ㄑㄧㄥ
ch'ing
qiong
<a href=http://resources.allsetlearning.com/chinese/pronunciation/qiong>qiong</a>
[tɕʰi̯ʊŋ]
ㄑㄩㄥ
ch'iung
qu
<a href=http://resources.allsetlearning.com/chinese/pronunciation/qu>qu</a>
[tɕʰy]
ㄑㄩ
ch'ü
que
<a href=http://resources.allsetlearning.com/chinese/pronunciation/que>que</a>
[tɕʰy̯œ]
ㄑㄩㄝ
ch'üeh
quan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/quan>quan</a>
[tɕʰy̯ɛn]
ㄑㄩㄢ
ch'üan
qun
<a href=http://resources.allsetlearning.com/chinese/pronunciation/qun>qun</a>
[tɕʰyn]
ㄑㄩㄣ
ch'ün
 q-
x-
xi
<a href=http://resources.allsetlearning.com/chinese/pronunciation/xi>xi</a>
[ɕi]
ㄒㄧ
his
xia
<a href=http://resources.allsetlearning.com/chinese/pronunciation/xia>xia</a>
[ɕi̯ɑ]
ㄒㄧㄚ
hsia
xiao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/xiao>xiao</a>
[ɕi̯ɑʊ̯]
ㄒㄧㄠ
hsiao
xie
<a href=http://resources.allsetlearning.com/chinese/pronunciation/xie>xie</a>
[ɕiɛ]
ㄒㄧㄝ
hsieh
xiu
<a href=http://resources.allsetlearning.com/chinese/pronunciation/xiu>xiu</a>
[ɕi̯ɤʊ̯]
ㄒㄧㄡ
hsiu
xian
<a href=http://resources.allsetlearning.com/chinese/pronunciation/xian>xian</a>
[ɕiɛn]
ㄒㄧㄢ
hsien
xiang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/xiang>xiang</a>
[ɕi̯ɑŋ]
ㄒㄧㄤ
hsiang
xin
<a href=http://resources.allsetlearning.com/chinese/pronunciation/xin>xin</a>
[ɕin]
ㄒㄧㄣ
hsin
xing
<a href=http://resources.allsetlearning.com/chinese/pronunciation/xing>xing</a>
[ɕiŋ]
ㄒㄧㄥ
hsing
xiong
<a href=http://resources.allsetlearning.com/chinese/pronunciation/xiong>xiong</a>
[ɕi̯ʊŋ]
ㄒㄩㄥ
hsiung
xu
<a href=http://resources.allsetlearning.com/chinese/pronunciation/xu>xu</a>
[ɕy]
ㄒㄩ
hsü
xue
<a href=http://resources.allsetlearning.com/chinese/pronunciation/xue>xue</a>
[ɕy̯œ]
ㄒㄩㄝ
hsüeh
xuan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/xuan>xuan</a>
[ɕy̯ɛn]
ㄒㄩㄢ
hsüan
xun
<a href=http://resources.allsetlearning.com/chinese/pronunciation/xun>xun</a>
[ɕyn]
ㄒㄩㄣ
hsün
 x-
g-
ga
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ga>ga</a>
[kɑ]
ㄍㄚ
ka
gai
<a href=http://resources.allsetlearning.com/chinese/pronunciation/gai>gai</a>
[kaɪ̯]
ㄍㄞ
kai
gao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/gao>gao</a>
[kɑʊ̯]
ㄍㄠ
kao
gan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/gan>gan</a>
[kan]
ㄍㄢ
kan
gang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/gang>gang</a>
[kɑŋ]
ㄍㄤ
kang
ge
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ge>ge</a>
[kɯ̯ʌ]
ㄍㄜ
ke
gei
<a href=http://resources.allsetlearning.com/chinese/pronunciation/gei>gei</a>
[keɪ̯]
ㄍㄟ
kei
gen
<a href=http://resources.allsetlearning.com/chinese/pronunciation/gen>gen</a>
[kən]
ㄍㄣ
ken
geng
<a href=http://resources.allsetlearning.com/chinese/pronunciation/geng>geng</a>
[kəŋ]
ㄍㄥ
keng
gou
<a href=http://resources.allsetlearning.com/chinese/pronunciation/gou>gou</a>
[kɤʊ̯]
ㄍㄡ
kou
gong
<a href=http://resources.allsetlearning.com/chinese/pronunciation/gong>gong</a>
[kʊŋ]
ㄍㄨㄥ
kung
gu
<a href=http://resources.allsetlearning.com/chinese/pronunciation/gu>gu</a>
[ku]
ㄍㄨ
ku
gua
<a href=http://resources.allsetlearning.com/chinese/pronunciation/gua>gua</a>
[ku̯ɑ]
ㄍㄨㄚ
kua
guai
<a href=http://resources.allsetlearning.com/chinese/pronunciation/guai>guai</a>
[ku̯aɪ̯]
ㄍㄨㄞ
kuai
gui
<a href=http://resources.allsetlearning.com/chinese/pronunciation/gui>gui</a>
[ku̯eɪ̯]
ㄍㄨㄟ
kui
guo
<a href=http://resources.allsetlearning.com/chinese/pronunciation/guo>guo</a>
[ku̯ɔ]
ㄍㄨㄛ
ko
guan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/guan>guan</a>
[ku̯an]
ㄍㄨㄢ
kuan
guang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/guang>guang</a>
[ku̯ɑŋ]
ㄍㄨㄤ
kuang
gun
<a href=http://resources.allsetlearning.com/chinese/pronunciation/gun>gun</a>
[ku̯ən]
ㄍㄨㄣ
kun
 g-
k-
ka
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ka>ka</a>
[kʰɑ]
ㄎㄚ
k'a
kai
<a href=http://resources.allsetlearning.com/chinese/pronunciation/kai>kai</a>
[kʰaɪ̯]
ㄎㄞ
k'ai
kao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/kao>kao</a>
[kʰɑʊ̯]
ㄎㄠ
k'ao
kan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/kan>kan</a>
[kʰan]
ㄎㄢ
k'an
kang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/kang>kang</a>
[kʰɑŋ]
ㄎㄤ
k'ang
ke
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ke>ke</a>
[kʰɯ̯ʌ]
ㄎㄜ
k'e
kei
<a href=http://resources.allsetlearning.com/chinese/pronunciation/kei>kei</a>
[kʰeɪ̯]
ㄎㄟ
k'ei
ken
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ken>ken</a>
[kʰən]
ㄎㄣ
k'en
keng
<a href=http://resources.allsetlearning.com/chinese/pronunciation/keng>keng</a>
[kʰəŋ]
ㄎㄥ
k'eng
kou
<a href=http://resources.allsetlearning.com/chinese/pronunciation/kou>kou</a>
[kʰɤʊ̯]
ㄎㄡ
k'ou
kong
<a href=http://resources.allsetlearning.com/chinese/pronunciation/kong>kong</a>
[kʰʊŋ]
ㄎㄨㄥ
k'ung
ku
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ku>ku</a>
[kʰu]
ㄎㄨ
k'u
kua
<a href=http://resources.allsetlearning.com/chinese/pronunciation/kua>kua</a>
[kʰu̯ɑ]
ㄎㄨㄚ
k'ua
kuai
<a href=http://resources.allsetlearning.com/chinese/pronunciation/kuai>kuai</a>
[kʰu̯aɪ̯]
ㄎㄨㄞ
k'uai
kui
<a href=http://resources.allsetlearning.com/chinese/pronunciation/kui>kui</a>
[kʰu̯eɪ̯]
ㄎㄨㄟ
k'ui
kuo
<a href=http://resources.allsetlearning.com/chinese/pronunciation/kuo>kuo</a>
[kʰu̯ɔ]
ㄎㄨㄛ
k'o
kuan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/kuan>kuan</a>
[kʰu̯an]
ㄎㄨㄢ
k'uan
kuang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/kuang>kuang</a>
[kʰu̯ɑŋ]
ㄎㄨㄤ
k'uang
kun
<a href=http://resources.allsetlearning.com/chinese/pronunciation/kun>kun</a>
[kʰu̯ən]
ㄎㄨㄣ
k'un
 k-
h-
ha
<a href=http://resources.allsetlearning.com/chinese/pronunciation/ha>ha</a>
[xɑ]
ㄏㄚ
ha
hai
<a href=http://resources.allsetlearning.com/chinese/pronunciation/hai>hai</a>
[xaɪ̯]
ㄏㄞ
hai
hao
<a href=http://resources.allsetlearning.com/chinese/pronunciation/hao>hao</a>
[xɑʊ̯]
ㄏㄠ
hao
han
<a href=http://resources.allsetlearning.com/chinese/pronunciation/han>han</a>
[xan]
ㄏㄢ
han
hang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/hang>hang</a>
[xɑŋ]
ㄏㄤ
hang
he
<a href=http://resources.allsetlearning.com/chinese/pronunciation/he>he</a>
[xɯ̯ʌ]
ㄏㄜ
he
hei
<a href=http://resources.allsetlearning.com/chinese/pronunciation/hei>hei</a>
[xeɪ̯]
ㄏㄟ
hei
hen
<a href=http://resources.allsetlearning.com/chinese/pronunciation/hen>hen</a>
[xən]
ㄏㄣ
hen
heng
<a href=http://resources.allsetlearning.com/chinese/pronunciation/heng>heng</a>
[xəŋ]
ㄏㄥ
heng
hou
<a href=http://resources.allsetlearning.com/chinese/pronunciation/hou>hou</a>
[xɤʊ̯]
ㄏㄡ
hou
hong
<a href=http://resources.allsetlearning.com/chinese/pronunciation/hong>hong</a>
[xʊŋ]
ㄏㄨㄥ
hung
hu
<a href=http://resources.allsetlearning.com/chinese/pronunciation/hu>hu</a>
[xu]
ㄏㄨ
hu
hua
<a href=http://resources.allsetlearning.com/chinese/pronunciation/hua>hua</a>
[xu̯ɑ]
ㄏㄨㄚ
hua
huai
<a href=http://resources.allsetlearning.com/chinese/pronunciation/huai>huai</a>
[xu̯aɪ̯]
ㄏㄨㄞ
huai
hui
<a href=http://resources.allsetlearning.com/chinese/pronunciation/hui>hui</a>
[xu̯eɪ̯]
ㄏㄨㄟ
hui
huo
<a href=http://resources.allsetlearning.com/chinese/pronunciation/huo>huo</a>
[xu̯ɔ]
ㄏㄨㄛ
ho
huan
<a href=http://resources.allsetlearning.com/chinese/pronunciation/huan>huan</a>
[xu̯an]
ㄏㄨㄢ
huan
huang
<a href=http://resources.allsetlearning.com/chinese/pronunciation/huang>huang</a>
[xu̯ɑŋ]
ㄏㄨㄤ
huang
hun
<a href=http://resources.allsetlearning.com/chinese/pronunciation/hun>hun</a>
[xu̯ən]
ㄏㄨㄣ
hun
 h-
-a- -a -ai -ao -an -ang -e- -e -ei -en -eng -er -o- -o -ou -ong -i- -i -i* -ia -iao -ie -iou -ian -iang -in -ing -iong -u- -u -ua -uai -uei -uo -uan -uang -uen -ueng -ü- -ü -üe -üan -ün

<script>

function defer(method) { 

   if (window.jQuery) {
       method();
   } else {
       setTimeout(function() { defer(method) }, 50);
   }

}

var audioEndedListener = function() { 

   var $audioDiv = $('.pinyin-table-audio-container');
   if ($audioDiv.children().length>1) {
       $audioDiv.children().get(1).play();
   }
   $(this).remove();
   if ($audioDiv.children().length>1) {
       $audioDiv.children().get(1).pause();
       $audioDiv.children().get(1).load();
   } else {
       $('.playing-audio').removeClass('playing-audio');
   }

}; var audioCanPlayListener = function() { 

   if (this===$('.pinyin-table-audio-container audio:last-child').get(0)) {
       console.log('Removing loading-audio class');
       $('.pinyin-table').removeClass('loading-audio');
   }

};

/* Add tone marks */ var vowelAddTone = function(vowel,number) { 

   var tones = ['āēīōūǖ',
                'áéíóúǘ',
                'ǎěǐǒǔǚ',
                'àèìòùǜ'][number-1]
   return tones['aeiouü'.indexOf(vowel)]

}; var syllableAddTone = function(syllable,number) { 

   if (syllable.indexOf("a")!==-1) {
       return syllable.substr(0,syllable.indexOf("a")) + vowelAddTone('a',number) + syllable.substr(syllable.indexOf("a")+1,syllable.length);
   } else if (syllable.indexOf("e")!==-1) {
       return syllable.substr(0,syllable.indexOf("e")) + vowelAddTone('e',number) + syllable.substr(syllable.indexOf("e")+1,syllable.length);
   } else if (syllable.indexOf("ou")!==-1) {
       return syllable.substr(0,syllable.indexOf("o")) + vowelAddTone('e',number) + syllable.substr(syllable.indexOf("o")+1,syllable.length);
   } else {
       var vowels = 'aeiouü';
       var vowelCount = 0
       for (var i=0; i<syllable.length; i++) {
           if (vowels.indexOf(syllable[i])!==-1) {
               vowelCount++;
           }
       }
       if (vowelCount===1) {
           for (var i=0; i<vowels.length; i++) {
               if (syllable.indexOf(vowels[i])!==-1) {
                   return syllable.substr(0,syllable.indexOf(vowels[i])) + vowelAddTone(syllable[syllable.indexOf(vowels[i])],number) + syllable.substr(syllable.indexOf(vowels[i])+1,syllable.length);
               }
           }
       } else {
           var first_vowel_index = 1000;
           for (var i=0; i<vowels.length; i++) {
               if (syllable.indexOf(vowels[i])!==-1 && syllable.indexOf(vowels[i])<first_vowel_index) {
                   first_vowel_index = syllable.indexOf(vowels[i])
               }
           }
           return syllable.substr(0,first_vowel_index+1) + vowelAddTone(syllable[first_vowel_index+1],number) + syllable.substr(first_vowel_index+2,syllable.length);
       }
   }

};

/*pinyin table scripts*/ var createTable = function() { 

   $('.table-link').hide();
   $('.table-ipa').hide();
   $('.table-zhuyin').hide();
   $('.table-wade-giles').hide();
   $('.col-placeholder').hide();

   $('#pinyin-chart-settings .additional-settings').hide();

   //Toggle additional settings
   $('#pinyin-chart-settings #additional-settings-collapse').click( function(e) {
       e.preventDefault();
       if ($(this).text()==="Show more Settings") {
           $(this).text("Show less Settings");
           $('#pinyin-chart-settings .additional-settings').slideDown();
       } else {
           $(this).text("Show more Settings");
           $('#pinyin-chart-settings .additional-settings').slideUp();
       }
   });

   //highlight row and col of hovered cell
   $('#pinyin-table td').hover( function() {
       if ($(this).children('div.table-pinyin').length && $('input[name="chart-mode"]:checked').val()==="audio") {
           $(this).addClass('table-extra-highlight');
           $(this).siblings().addClass('table-highlight');
           var rowIndex = $(this).prevAll().length+1;
           $('#pinyin-table tr :nth-child('+rowIndex+')').addClass('table-highlight');
       };
   }, function() {
       $(this).removeClass('table-extra-highlight')
       $('.table-highlight').removeClass('table-highlight');
   }).click( function() {
       if ($(this).children('div.table-pinyin').length && $('input[name="chart-mode"]:checked').val()==="audio") {
           var tones=$('input[name=\'tone\']:checked').val();
           var $audioDiv = $('.pinyin-table-audio-container');
           $audioDiv.empty();
           for (var i=0; i<tones.length; i++) {
               var sound_url = "http://resources.allsetlearning.com/pronwiki/resources/pinyin-audio/" + $(this).attr('id') + tones[i] + ".mp3"
               sound_url = sound_url.replace('ü', 'u%CC%88');
               $audioDiv.append("<audio src=\"" + sound_url + "\" type=\"audio/mpeg\"></audio>");
           };
           for (var i=0; i<$audioDiv.children().length; i++) {
               $audioDiv.children().get(i).addEventListener("ended",audioEndedListener);
               $audioDiv.children().get(i).addEventListener("canplay",audioCanPlayListener);
           };
           $audioDiv.children().get(0).pause();
           $audioDiv.children().get(0).load();
           $('.pinyin-table').addClass('loading-audio');
           $('.playing-audio').removeClass('playing-audio');
           $(this).addClass('playing-audio');
           $audioDiv.children().get(0).play();
           if ($audioDiv.children().length>1) {
               $audioDiv.children().get(1).pause();
               $audioDiv.children().get(1).load();
           };
       };
   });

   //collapse column groups
   $('th.col-a, th.col-e, th.col-o, th.col-i, th.col-u, th.col-v').hover( function() {
       var thClass;
       if ($(this).hasClass('col-a')) {
           thClass='col-a';
       } else if ($(this).hasClass('col-e')) {
           thClass='col-e';
       } else if ($(this).hasClass('col-o')) {
           thClass='col-o';
       } else if ($(this).hasClass('col-i')) {
           thClass='col-i';
       } else if ($(this).hasClass('col-u')) {
           thClass='col-u';
       } else if ($(this).hasClass('col-v')) {
           thClass='col-v';
       }
       $('th.'+thClass).addClass('table-selected');
   }, function() {
       $('.table-selected').removeClass('table-selected');
   }).click( function() {
       var thClass;
       if ($(this).hasClass('col-a')) {
           thClass='col-a';
       } else if ($(this).hasClass('col-e')) {
           thClass='col-e';
       } else if ($(this).hasClass('col-o')) {
           thClass='col-o';
       } else if ($(this).hasClass('col-i')) {
           thClass='col-i';
       } else if ($(this).hasClass('col-u')) {
           thClass='col-u';
       } else if ($(this).hasClass('col-v')) {
           thClass='col-v';
       }
       if ($(this).hasClass('col-placeholder')) {
           $('#pinyin-table .'+thClass).show();
           $('#pinyin-table .'+thClass+'.col-placeholder').hide();
       } else {
           $('#pinyin-table .'+thClass).hide();
           $('#pinyin-table .'+thClass+'.col-placeholder').show();
       }
   });

   //change text size
   $('div#pinyin-chart-settings div.additional-settings input[name="text-size"]').click( function() {
       var new_size = $('input[name="text-size"]:checked').val();
       console.log('Changing table size to '+new_size);
       $('.pinyin-table').removeClass('small').removeClass('medium').removeClass('large');
       $('.pinyin-table').addClass(new_size);
   });



   //change chart mode
   $('div#pinyin-chart-settings div.additional-settings input[name="chart-mode"]').click( function() {
       var new_mode = $('input[name="chart-mode"]:checked').val();
       if (new_mode==="link") {
           $('.table-pinyin').hide();
           $('.table-link').show();
       } else {
           $('.table-pinyin').show();
           $('.table-link').hide();
       }
   });

   //toggle showing ipa, zhuyin, wade-giles
   $('#table-toggle-ipa').click(function() {
       if ($(this).prop('checked')) {
           $('.table-ipa').show();
       } else {
           $('.table-ipa').hide();
       }
   });
   $('#table-toggle-zhuyin').click(function() {
       if ($(this).prop('checked')) {
           $('.table-zhuyin').show();
       } else {
           $('.table-zhuyin').hide();
       }
   });
   $('#table-toggle-wade-giles').click(function() {
       if ($(this).prop('checked')) {
           $('.table-wade-giles').show();
       } else {
           $('.table-wade-giles').hide();
       }
   });

   //toggle large modal "fullscreen" mode
   $('#table-toggle-large-modal').click(function() {
       if ($('.pinyin-chart-modal').length) {
           //already in fullscreen mode, so disable
           $(this).text('Enter FullScreen');
           $('html, body').removeClass('pinyin-chart-modal-active');
           $('body').children().removeClass('hidden-by-pinyin-chart-modal');
           var $mwContentText = $('#mw-content-text');
           $mwContentText.prepend($('.table-container'));
           $mwContentText.prepend($('.pinyin-table-audio-container'));
           $mwContentText.prepend($('#pinyin-chart-settings'));
           $('.pinyin-chart-modal').remove();
       } else {
           //enable fullscreen mode
           $(this).text('Exit FullScreen');
           $('html, body').addClass('pinyin-chart-modal-active');
           $('body').children().addClass('hidden-by-pinyin-chart-modal');

$('body').append('

'); 

           var $modal = $('.pinyin-chart-modal');
           $modal.append($('#pinyin-chart-settings'));
           $modal.append($('.pinyin-table-audio-container'));
           $modal.append($('.table-container'));
       }
   });

}

defer(createTable); </script>

Retrieved from "https://resources.allsetlearning.com/pronwiki/?title=Widget:Pinyin_chart&oldid=4576"