<div id="jquery_jplayer_1"></div>
<div id="jp_container_1">
<a href="#" class="jp-play"><img src="img/playBtn.png"></a>
<a href="#" class="jp-pause"><img src="img/pauseBtn.png"></a>
<a href="#" class="jp-mute"><img src="img/unmuteBtn.png"></a>
<a href="#" class="jp-unmute"><img src="img/muteBtn.png"></a>
<div class="jp-current-time" role="timer" aria-label="time"> </div>
</div>
Hey guys,
New here, I'm working on a website to teach a foreign language.
I plan to put mini-stories on my website (in the language learnt by the user) and I will make available an audio version of it.
However, I'd like to difg further and let the user click on any word of the story so that (s)he can hear the audio from this exact word to practice his speaking.
Here are my 2 questions:
Can I do that with jPlayer?
Can I tag words with an accurate time code rather than using a percentage so that the audio starts at the perfect time?
Thanks a lot for your help on this, I appreciate it.
--
Laurent
function checkhash(){
var hash = location.hash.substr(1);
if(hash != ''){
hashstr = hash.split("/");
artist = (isEncoded(hashstr[1]))?hashstr[1]:encodeURI(hashstr[1]);
title = (isEncoded(hashstr[2]))?hashstr[2]:encodeURI(hashstr[2]);
if(hashstr.length = 3){
$('.musicbar').addClass('animate');
$('#lyrics').html('Loading...');
var request = $.ajax({
url: "lyrics/"+ artist +"/"+ title,
type: "GET",
data: "",
dataType: "html"
});
request.done(function(data){
var json = $.parseJSON(data);
myPlaylist.remove();
myPlaylist.add({
title:json[0].title,
artist:json[0].artist,
mp3:json[0].url,
poster:json[0].image
});
myPlaylist.play();
/*
if(!json[0].lyrics){
var lyrics = 'No Lyrics';
}else{
var lyrics = json[0].lyrics;
}
if(!json[0].image){
var image = 'http://sibnerpartie.tk/assets/general/cover.png';
}else{
var image = json[0].image;
}
});
request.fail(function(jqXHR, textStatus) {
$("#lyrics").html("Request failed: " + textStatus );
});
}else{
//error
}
}
}
checkhash();
$(window).on('hashchange', function() {
checkhash();
});
$(document).on($.jPlayer.event.play, myPlaylist.cssSelector.jPlayer, function(){
$('.musicbar').addClass('animate');
//alert(nowplaying.title+' +++ '+myPlaylist.playlist[myPlaylist.current].title +' && '+ nowplaying.artist+' +++ '+myPlaylist.playlist[myPlaylist.current].artist);
/* Lyrics load */
if(nowplaying.artist != myPlaylist.playlist[myPlaylist.current].artist || nowplaying.title != myPlaylist.playlist[myPlaylist.current].title){
window.location.hash = "#/"+encodeURI(myPlaylist.playlist[myPlaylist.current].artist)+"/"+encodeURI(myPlaylist.playlist[myPlaylist.current].title);
$('#lyrics').html('Loading...');
var request = $.ajax({
url: "lyrics/"+encodeURI(myPlaylist.playlist[myPlaylist.current].artist)+"/"+encodeURI(myPlaylist.playlist[myPlaylist.current].title),
type: "GET",
data: "",
dataType: "html"
});
request.done(function(data){
nowplaying.artist = myPlaylist.playlist[myPlaylist.current].artist;
nowplaying.title = myPlaylist.playlist[myPlaylist.current].title;
var json = $.parseJSON(data);
if(!json[0].lyrics){
var lyrics = 'No Lyrics';
}else{
var lyrics = json[0].lyrics;
}
if(!json[0].image){
var image = 'http://sibnerpartie.tk/assets/general/cover.png';
}else{
var image = json[0].image;
}
$("#lyrics").html('<div style="padding-top:15px;padding-bottom:15px;position:relative;display:block;margin-bottom:-1px;" class="clearfix"><img src="'+image+'" class="pull-left thumb-lg m-r"><h3 class="block text-ellipsis">'+json[0].title+'</h3><small class="text-muted">by '+json[0].artist+'</small><div><a href="https://www.facebook.com/sharer.php?u='+encodeURIComponent('http://music.warunganime.net/'+encodeURIComponent(json[0].artist)+'/'+encodeURIComponent(json[0].title))+'" target="_blank" onclick="window.open(\'https://www.facebook.com/sharer.php?u='+encodeURIComponent('http://music.warunganime.net/'+encodeURIComponent(json[0].artist)+'/'+encodeURIComponent(json[0].title))+'&t='+encodeURIComponent('Listen '+json[0].title+' Song by '+json[0].artist)+'\',\'Facebook Share\',\'status=1,height=360,width=500,resizable=0\'); return false;"><i class="fa fa-facebook"></i></a></div></div><div>'+lyrics+'</div>');
});
request.fail(function(jqXHR, textStatus) {
$("#lyrics").html("Request failed: " + textStatus );
});
}
/*End Lyrics load */
});
Here's my code anyway
Hello Support,
I am using jplayer in my magento 2 site and i am getting issue
here is the link of my magento 2 site
http://dev.columbariumniches.com/manufacturing
Hello,
can jPlayer support adaptive bitrate mp3 song ?
Please help me..