Difference between revisions of "Widget:Audio player"

 
(8 intermediate revisions by the same user not shown)
Line 9: Line 9:
 
<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/pinyin-audio/<!--{$file}-->.mp3';
+
     var soundUrl = 'https://resources.allsetlearning.com/pronwiki/resources/<!--{$folder}-->/<!--{$file}-->.mp3';
 
     soundUrl = soundUrl.replace('ü', 'u%CC%88');
 
     soundUrl = soundUrl.replace('ü', 'u%CC%88');
 
     $('#audioContainer-<!--{$file}-->').append('<audio src="' + soundUrl + '" type="audio/mpeg" preload></audio>');
 
     $('#audioContainer-<!--{$file}-->').append('<audio src="' + soundUrl + '" type="audio/mpeg" preload></audio>');
Line 32: Line 32:
  
  
     $('#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>