Difference between revisions of "Widget:Syllable page audio"

(Play audio on syllable pages without including full pinyin table)
 
 
(25 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<script>
+
<style>
−
var styleNode = document.createElement('style');
 
−
var style = document.createTextNode('
 
 
.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.loading-audio { cursor:wait; }
+
.play-icon:hover { fill:black; }
−
.play-icon.playing-audio { fill:black; }
+
.play-icon.playing { fill:black; }
−
');
+
</style>
−
styleNode.appendChild(style);
 
−
document.getElementsByTagName('head').appendChild(styleNode);
 
−
</script>
 
  
 
<div id="audioContainer" class="audio-container"></div>
 
<div id="audioContainer" class="audio-container"></div>
 
<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="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+
<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 20: Line 15:
  
 
<script>
 
<script>
−
var audioEndedListener = function() {
+
function defer(method) {
−
var $audioDiv = $('.pinyin-table-audio-container');
+
    if (window.jQuery) {
−
if ($audioDiv.children().length>1) {
+
        method();
−
$audioDiv.children().get(1).play();
+
    } else {
−
}
+
        setTimeout(function() { defer(method) }, 50);
−
$(this).remove();
+
    }
−
if ($audioDiv.children().length>1) {
+
}
−
$audioDiv.children().get(1).pause();
+
 
−
$audioDiv.children().get(1).load();
+
var syllable = function() {
−
} else {
+
var tones = '1234';
−
$('.playing-audio').removeClass('playing-audio');
 
−
}
 
−
};
 
  
−
var audioCanPlayListener = function() {
+
for (var i = 0; i < 4; i++) {
−
if (this===$('.pinyin-table-audio-container audio:last-child').get(0)) {
+
var soundUrl = 'https://resources.allsetlearning.com/pronwiki/resources/pinyin-audio/' + $('#syllable').text().toLowerCase() + tones.charAt(i) + '.mp3';
−
console.log('Removing loading-audio class');
+
console.log(soundUrl.indexOf('ü'), soundUrl.indexOf('%C3%BC'), soundUrl.indexOf('%c3%bc'), soundUrl.indexOf('.C3.BC'), soundUrl.indexOf('.c3.bc'));
−
$('.pinyin-table').removeClass('loading-audio');
+
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');
 +
}
 +
};
 
}
 
}
−
};
 
  
−
$(document).ready(function() {
 
 
$('#playIcon').click(function() {
 
$('#playIcon').click(function() {
−
var tones = '1234';
 
 
var $audioDiv = $('#audioContainer');
 
var $audioDiv = $('#audioContainer');
−
$audioDiv.empty();
+
for (var i = 0; i < 4; i++) {
−
for (var i = 0; i < tones.length; i++) {
+
$audioDiv.children().get(i).pause();
−
var soundUrl = 'http://resources.allsetlearning.com/pronwiki/resources/pinyin-audio/' + $('#syllable').text() + tones.charAt(i) + '.mp3';
+
}
−
if (soundUrl.indexOf('.C3.BC') !== -1) {
+
$audioDiv.children().get(0).play();
−
soundUrl = soundUrl.substr(0, soundUrl.indexOf('.C3.BC')) + 'u%CC%88' + soundUrl.substr(soundUrl.indexOf('.C3.BC') + 6, soundUrl.length);
+
$('#playIcon').addClass('playing');
−
};
 
−
$audioDiv.append('<audio src="' + soundUrl + '" 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();
 
−
$audioDiv.children.get(0).play();
 
−
$(this).addClass('loading-audio');
 
−
$(this).addClass('playing-audio');
 
−
$audioDiv.children.get(1).pause();
 
−
$audioDiv.children.get(1).load();
 
 
});
 
});
−
});
+
};
 +
 
 +
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>

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