Difference between revisions of "Widget:Audio player"
| (9 intermediate revisions by the same user not shown) | |||
| Line 6: | Line 6: | ||
</style> | </style> | ||
| − | <div id="audioContainer" class="audio-container"></div> | + | <div id="audioContainer-<!--{$file}-->" class="audio-container"></div> |
<span id="syllable" style="display:none;"><!--{$file}--></span> | <span id="syllable" style="display:none;"><!--{$file}--></span> | ||
| − | <svg id="playIcon" class="play-icon" fill="#000000" height="36" viewBox="0 0 24 24" width="36" xmlns="http://www.w3.org/2000/svg"> | + | <svg id="playIcon-<!--{$file}-->" 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) { | + | function defer<!--{$file}-->(method) { |
if (window.jQuery) { | if (window.jQuery) { | ||
method(); | method(); | ||
} else { | } else { | ||
| − | setTimeout(function() { defer(method) }, 50); | + | setTimeout(function() { defer<!--{$file}-->(method) }, 50); |
} | } | ||
} | } | ||
| − | var playFile = function() { | + | var playFile<!--{$file}--> = function() { |
| − | var soundUrl = 'https://resources.allsetlearning.com/pronwiki/resources/ | + | var soundUrl = 'https://resources.allsetlearning.com/pronwiki/resources/<!--{$folder}-->/<!--{$file}-->.mp3'; |
soundUrl = soundUrl.replace('ü', 'u%CC%88'); | soundUrl = soundUrl.replace('ü', 'u%CC%88'); | ||
| − | $('#audioContainer').append('<audio src="' + soundUrl + '" type="audio/mpeg" preload></audio>'); | + | $('#audioContainer-<!--{$file}-->').append('<audio src="' + soundUrl + '" type="audio/mpeg" preload></audio>'); |
| − | $('#audioContainer').children().get(0).onended = function () { | + | $('#audioContainer-<!--{$file}-->').children().get(0).onended = function () { |
$('#playIcon').removeClass('playing'); | $('#playIcon').removeClass('playing'); | ||
}; | }; | ||
| − | $('#playIcon').click(function () { | + | $('#playIcon-<!--{$file}-->').click(function () { |
| − | var $audioDiv = $('#audioContainer'); | + | var $audioDiv = $('#audioContainer-<!--{$file}-->'); |
$audioDiv.children().get(0).pause(); | $audioDiv.children().get(0).pause(); | ||
$audioDiv.children().get(0).play(); | $audioDiv.children().get(0).play(); | ||
| − | $('#playIcon').addClass('playing'); | + | $('#playIcon-<!--{$file}-->').addClass('playing'); |
}); | }); | ||
} | } | ||
| − | defer(playFile); | + | defer<!--{$file}-->(playFile<!--{$file}-->); |
</script> | </script> | ||
Latest revision as of 02:43, 21 April 2020
<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 playFile = function() {
var soundUrl = 'https://resources.allsetlearning.com/pronwiki/resources//.mp3'; soundUrl = soundUrl.replace('ü', 'u%CC%88'); $('#audioContainer-').append('<audio src="' + soundUrl + '" type="audio/mpeg" preload></audio>'); $('#audioContainer-').children().get(0).onended = function () { $('#playIcon').removeClass('playing'); };
$('#playIcon-').click(function () {
var $audioDiv = $('#audioContainer-');
$audioDiv.children().get(0).pause();
$audioDiv.children().get(0).play();
$('#playIcon-').addClass('playing');
});
}
defer(playFile); </script>
