Jump to: navigation, search

Difference between revisions of "Widget:Syllable page audio"

(Play audio on syllable pages without including full pinyin table)
 
(Testing)
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 { fill:gray; cursor:pointer; }
 
.play-icon.loading-audio { cursor:wait; }
 
.play-icon.loading-audio { cursor:wait; }
 
.play-icon.playing-audio { fill:black; }
 
.play-icon.playing-audio { 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>
Line 57: Line 52:
 
$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();
$audioDiv.children.get(0).play();
+
$audioDiv.children().get(0).play();
 
$(this).addClass('loading-audio');
 
$(this).addClass('loading-audio');
 
$(this).addClass('playing-audio');
 
$(this).addClass('playing-audio');
$audioDiv.children.get(1).pause();
+
$audioDiv.children().get(1).pause();
$audioDiv.children.get(1).load();
+
$audioDiv.children().get(1).load();
 
});
 
});
 
});
 
});
 
</script>
 
</script>

Revision as of 03:20, 11 June 2015

<style> .audio-container { display:none; } .play-icon { fill:gray; cursor:pointer; } .play-icon.loading-audio { cursor:wait; } .play-icon.playing-audio { fill:black; } </style>

<svg id="playIcon" class="play-icon" fill="#000000" height="24" viewBox="0 0 24 24" width="24" 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> 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'); } };

$(document).ready(function() { $('#playIcon').click(function() { var tones = '1234'; var $audioDiv = $('#audioContainer'); $audioDiv.empty(); for (var i = 0; i < tones.length; i++) { var soundUrl = 'http://resources.allsetlearning.com/pronwiki/resources/pinyin-audio/' + $('#syllable').text() + tones.charAt(i) + '.mp3'; if (soundUrl.indexOf('.C3.BC') !== -1) { soundUrl = soundUrl.substr(0, soundUrl.indexOf('.C3.BC')) + 'u%CC%88' + soundUrl.substr(soundUrl.indexOf('.C3.BC') + 6, soundUrl.length); }; $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(); }); }); </script>