As it happens, I have integrated jPlayer into LimeSurvey.
Create a new "audio" directory in your template directory and upload your audio files there. (these can be placed elsewhere but the code below would need to be modified)
Download the jPlayer plugin
and add these to your template:
- Jplayer.swf
- jquery.jplayer.min.js
- The "skin" folder
Add this to startpage.pstpl after {TEMPLATEJS}
Code:
<!-- jPlayer files -->
<link href="{TEMPLATEURL}skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="{TEMPLATEURL}jquery.jplayer.min.js"></script>
Add this code to your template.js file:
Code:
$(document).ready(function(){
if($('.audioSource').length > 0) {
// Define some vars
var surveyRoot = location.pathname.split('index.php')[0];
var templateName = $('head link[href*="template.css"]').attr('href').replace(/\/template.css/, '').split('/templates/')[1];
var fieldNames = $('input#fieldnames').attr('value');
var tmp = fieldNames.split('X');
var sID = tmp[0];
var gID = tmp[1];
// Add some classes
$('.audioSource').closest('div.question-wrapper').addClass('audioQuestion');
// Loop through all player source inclusions
$('.audioSource').each(function(i) {
// The source filename
var audioSource = $(this).text().replace(/[\s\n\t]/g,'');
//Insert a wrapper for the player object
$(this).after('<div id="player'+i+'" class="playerWrapper" />');
// Insert the player user interface
var parentClass = '';
if($(this).closest('tr[id^="javatbd"]').length > 0) {
parentClass = 'subQuestion';
}
else if($(this).closest('div.question-wrapper').length > 0) {
parentClass = 'question';
}
else {
parentClass = 'groupDescription';
}
var playerController = '<div id="jp_container_'+i+'" class="jp-audio '+parentClass+'"> \
<div class="jp-type-single"> \
<div class="jp-gui jp-gui_'+i+' jp-interface"> \
<ul class="jp-controls"> \
<li><a href="javascript:;" class="jp-play jp-play_'+i+'" tabindex="1">play</a></li> \
<li><a href="javascript:;" class="jp-pause jp-pause_'+i+'" tabindex="1">pause</a></li> \
<li><a href="javascript:;" class="jp-stop jp-stop_'+i+'" tabindex="1">stop</a></li> \
<li><a href="javascript:;" class="jp-mute jp-mute_'+i+'" tabindex="1" title="mute">mute</a></li> \
<li><a href="javascript:;" class="jp-unmute jp-unmute_'+i+'" tabindex="1" title="unmute">unmute</a></li> \
<li><a href="javascript:;" class="jp-volume-max jp-volume-max_'+i+'" tabindex="1" title="max volume">max volume</a></li> \
</ul> \
<div class="jp-progress"> \
<div class="jp-seek-bar jp-seek-bar_'+i+'"> \
<div class="jp-play-bar jp-play-bar_'+i+'"></div> \
</div> \
</div> \
<div class="jp-volume-bar jp-volume-bar_'+i+'"> \
<div class="jp-volume-bar-value jp-volume-bar-value_'+i+'"></div> \
</div> \
<div class="jp-time-holder"> \
<div class="jp-current-time jp-current-time_'+i+'"></div> \
<div class="jp-duration jp-duration_'+i+'"></div> \
<ul class="jp-toggles"> \
<li><a href="javascript:;"class="jp-repeat jp-repeat_'+i+'" tabindex="1" title="repeat">Repeat</a></li> \
<li><a href="javascript:;"class="jp-repeat-off jp-repeat-off_'+i+'" tabindex="1" title="repeat off">Repeat off</a></li> \
</ul> \
</div> \
</div> \
</div> \
</div>'
if(parentClass == 'question' || parentClass == 'subQuestion') {
$(this).parent().prepend(playerController);
}
else {
$(this).parent().append(playerController);
}
// Construct the player object
$('#player'+i).jPlayer( {
swfPath: surveyRoot+'upload/templates/'+templateName,
solution: 'html, flash',
supplied: 'mp3',
preload: 'metadata',
volume: 0.1,
muted: false,
backgroundColor: '#000000',
cssSelectorAncestor: '#jp_container_'+i+'',
cssSelector: {
play: '.jp-play_'+i+'',
pause: '.jp-pause_'+i+'',
stop: '.jp-stop_'+i+'',
seekBar: '.jp-seek-bar_'+i+'',
playBar: '.jp-play-bar_'+i+'',
mute: '.jp-mute_'+i+'',
unmute: '.jp-unmute_'+i+'',
volumeBar: '.jp-volume-bar_'+i+'',
volumeBarValue: '.jp-volume-bar-value_'+i+'',
volumeMax: '.jp-volume-max_'+i+'',
currentTime: '.jp-current-time_'+i+'',
duration: '.jp-duration_'+i+'',
repeat: '.jp-repeat_'+i+'',
repeatOff: '.jp-repeat-off_'+i+'',
gui: '.jp-gui_'+i+''
},
ready: function () {
$(this).jPlayer("setMedia", {
mp3: surveyRoot+'upload/templates/'+templateName+'/audio/'+audioSource
});
},
play: function () {
// Pause all other players
$(this).jPlayer('pauseOthers');
},
errorAlerts: false,
warningAlerts: false
});
});
}
});
Add this to the end of template.css:
Code:
/******** Audio player styles (additional styles in the skin folder) ********/
span.group-description {
display: inline-block;
padding: 5px;
}
.audioSource,
.answeredCodes {
display: none;
}
.jp-audio {
text-align: center;
}
In the group description or question source where you want a player to appear, add something like this where "question_1.mp3" is the desired audio filename. These <div> elements will be hidden by CSS and automatically detected by JavaScript which will insert the player.
Code:
<div class="audioSource">question_1.mp3</div>
Here's a working LimeSurvey 2.0 template and survey:
