Widget:Audio player

<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 file = function() { var soundUrl = 'https://resources.allsetlearning.com/pronwiki/resources/pinyin-audio/.mp3'; soundUrl = soundUrl.replace('ü', 'u%CC%88'); $('#audioContainer').append('<audio src="' + soundUrl + '" type="audio/mpeg" preload></audio>'); $('#audioContainer').children().get(0).onended = function() { if ($(this).next().length) { $(this).next().get(0).play(); } else { $('#playIcon').removeClass('playing'); } }; }

$('#playIcon').click(function() { var $audioDiv = $('#audioContainer'); $audioDiv.children().get(0).pause(); $audioDiv.children().get(0).play(); $('#playIcon').addClass('playing'); });

defer(file); </script>