Difference between revisions of "Widget:Pinyin chart"

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