Jump to: navigation, search

Difference between revisions of "Widget:Syllable page audio"

(testing)
(testing)
Line 2: Line 2:
 
.audio-container { display:none; }
 
.audio-container { display:none; }
 
.play-icon { fill:gray; cursor:pointer; }
 
.play-icon { fill:gray; cursor:pointer; }
 +
.play-icon:hover { fill:black; }
 +
.play-icon.playing { fill:black; }
 
</style>
 
</style>
  
Line 24: Line 26:
 
$('#audioContainer').append('<audio src="' + soundUrl + '" type="audio/mpeg" preload></audio>');
 
$('#audioContainer').append('<audio src="' + soundUrl + '" type="audio/mpeg" preload></audio>');
 
$('#audioContainer').children().get(i).onended = function() {
 
$('#audioContainer').children().get(i).onended = function() {
console.log('audio ended listener');
+
if ($(this).next()) {
console.log(this);
+
$(this).next().get(0).play();
$(this).next().get(0).play();
+
} else {
 +
$('#playIcon').removeClass('playing');
 
};
 
};
 
}
 
}
Line 37: Line 40:
 
}
 
}
 
$audioDiv.children().get(0).play();
 
$audioDiv.children().get(0).play();
 +
$('#playIcon').addClass('playing');
 
});
 
});
 
});
 
});
 
</script>
 
</script>

Revision as of 04:21, 11 June 2015

<style> .audio-container { display:none; } .play-icon { fill:gray; cursor:pointer; } .play-icon:hover { fill:black; } .play-icon.playing { 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> $(document).ready(function() { var tones = '1234';

for (var i = 0; i < 4; i++) { var soundUrl = 'http://resources.allsetlearning.com/pronwiki/resources/pinyin-audio/' + $('#syllable').text().toLowerCase() + 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); }; console.log(soundUrl); $('#audioContainer').append('<audio src="' + soundUrl + '" type="audio/mpeg" preload></audio>'); $('#audioContainer').children().get(i).onended = function() { if ($(this).next()) { $(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(i).fastSeek(0); } $audioDiv.children().get(0).play(); $('#playIcon').addClass('playing'); }); }); </script>