Difference between revisions of "Widget:Syllable page audio"
Mscottmoore (talk | contribs) (testing) |
|||
| (18 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
<style> | <style> | ||
.audio-container { display:none; } | .audio-container { display:none; } | ||
| − | .play-icon { fill:gray; cursor:pointer; } | + | .play-icon { float:right; padding-right:10px; margin-top:-5px; fill:gray; cursor:pointer; } |
.play-icon:hover { fill:black; } | .play-icon:hover { fill:black; } | ||
.play-icon.playing { fill:black; } | .play-icon.playing { fill:black; } | ||
| Line 9: | Line 9: | ||
<span id="syllable" style="display:none;"><!--{$syllable}--></span> | <span id="syllable" style="display:none;"><!--{$syllable}--></span> | ||
| − | <svg id="playIcon" class="play-icon" fill="#000000" height=" | + | <svg id="playIcon" class="play-icon" fill="#000000" height="36" viewBox="0 0 24 24" width="36" xmlns="http://www.w3.org/2000/svg"> |
<path d="M0 0h24v24H0z" fill="none"/> | <path d="M0 0h24v24H0z" fill="none"/> | ||
<path d="M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/> | <path d="M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/> | ||
| Line 15: | Line 15: | ||
<script> | <script> | ||
| − | + | function defer(method) { | |
| + | if (window.jQuery) { | ||
| + | method(); | ||
| + | } else { | ||
| + | setTimeout(function() { defer(method) }, 50); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | var syllable = function() { | ||
var tones = '1234'; | var tones = '1234'; | ||
for (var i = 0; i < 4; i++) { | for (var i = 0; i < 4; i++) { | ||
| − | var soundUrl = ' | + | var soundUrl = 'https://resources.allsetlearning.com/pronwiki/resources/pinyin-audio/' + $('#syllable').text().toLowerCase() + tones.charAt(i) + '.mp3'; |
| − | + | console.log(soundUrl.indexOf('ü'), soundUrl.indexOf('%C3%BC'), soundUrl.indexOf('%c3%bc'), soundUrl.indexOf('.C3.BC'), soundUrl.indexOf('.c3.bc')); | |
| − | + | soundUrl = soundUrl.replace('ü', 'u%CC%88'); | |
| − | |||
console.log(soundUrl); | console.log(soundUrl); | ||
$('#audioContainer').append('<audio src="' + soundUrl + '" type="audio/mpeg" preload></audio>'); | $('#audioContainer').append('<audio src="' + soundUrl + '" type="audio/mpeg" preload></audio>'); | ||
$('#audioContainer').children().get(i).onended = function() { | $('#audioContainer').children().get(i).onended = function() { | ||
| − | if ($(this).next()) { | + | if ($(this).next().length) { |
$(this).next().get(0).play(); | $(this).next().get(0).play(); | ||
} else { | } else { | ||
$('#playIcon').removeClass('playing'); | $('#playIcon').removeClass('playing'); | ||
| + | } | ||
}; | }; | ||
} | } | ||
| Line 37: | Line 45: | ||
for (var i = 0; i < 4; i++) { | for (var i = 0; i < 4; i++) { | ||
$audioDiv.children().get(i).pause(); | $audioDiv.children().get(i).pause(); | ||
| − | |||
} | } | ||
$audioDiv.children().get(0).play(); | $audioDiv.children().get(0).play(); | ||
$('#playIcon').addClass('playing'); | $('#playIcon').addClass('playing'); | ||
}); | }); | ||
| − | }); | + | }; |
| + | |||
| + | defer(syllable); | ||
</script> | </script> | ||
Latest revision as of 15:03, 8 November 2019
<style> .audio-container { display:none; } .play-icon { float:right; padding-right:10px; margin-top:-5px; fill:gray; cursor:pointer; } .play-icon:hover { fill:black; } .play-icon.playing { fill:black; } </style>
<svg id="playIcon" class="play-icon" fill="#000000" height="36" viewBox="0 0 24 24" width="36" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/> <path d="M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
</svg>
<script> function defer(method) {
if (window.jQuery) {
method();
} else {
setTimeout(function() { defer(method) }, 50);
}
}
var syllable = function() { var tones = '1234';
for (var i = 0; i < 4; i++) { var soundUrl = 'https://resources.allsetlearning.com/pronwiki/resources/pinyin-audio/' + $('#syllable').text().toLowerCase() + tones.charAt(i) + '.mp3'; console.log(soundUrl.indexOf('ü'), soundUrl.indexOf('%C3%BC'), soundUrl.indexOf('%c3%bc'), soundUrl.indexOf('.C3.BC'), soundUrl.indexOf('.c3.bc')); soundUrl = soundUrl.replace('ü', 'u%CC%88'); console.log(soundUrl); $('#audioContainer').append('<audio src="' + soundUrl + '" type="audio/mpeg" preload></audio>'); $('#audioContainer').children().get(i).onended = function() { if ($(this).next().length) { $(this).next().get(0).play(); } else { $('#playIcon').removeClass('playing'); } }; }
$('#playIcon').click(function() { var $audioDiv = $('#audioContainer'); for (var i = 0; i < 4; i++) { $audioDiv.children().get(i).pause(); } $audioDiv.children().get(0).play(); $('#playIcon').addClass('playing'); }); };
defer(syllable); </script>
