- Posts: 13
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Short Audio Clips for Surveys - Hosting/Streaming Advice
9 years 11 months ago #94554
by spessex
Short Audio Clips for Surveys - Hosting/Streaming Advice was created by spessex
Hi
I'm not sure if I'm in the right forum for this but I just wanted to know if anyone had any advice or experience with using audio clips in their surveys?
Questions include what is the best way to host the files? Should they be MP3? Can the files simply be placed on the server (Linux box) or does it require specialist streaming software? Are there simpler ways to embed audio into a survey like embedding YouTube videos using simple embedded code (and hence using their server resources)? Am I worrying too much or is this kind of thing straightforward?
For information imagine that a survey has a short 30 sec audio clip and the survey maybe hit by 1000 users. It's highly likely that the audio file maybe be called by up to 300 users in anyone time (depending on when they hit the server).
Thank you
Stephen
I'm not sure if I'm in the right forum for this but I just wanted to know if anyone had any advice or experience with using audio clips in their surveys?
Questions include what is the best way to host the files? Should they be MP3? Can the files simply be placed on the server (Linux box) or does it require specialist streaming software? Are there simpler ways to embed audio into a survey like embedding YouTube videos using simple embedded code (and hence using their server resources)? Am I worrying too much or is this kind of thing straightforward?
For information imagine that a survey has a short 30 sec audio clip and the survey maybe hit by 1000 users. It's highly likely that the audio file maybe be called by up to 300 users in anyone time (depending on when they hit the server).
Thank you
Stephen
The topic has been locked.
9 years 11 months ago #94560
by spessex
Replied by spessex on topic Short Audio Clips for Surveys - Hosting/Streaming Advice
Additionally please note someone from the Drupal community has mentioned that jPlayer might be a good way to go. Has anyone any experience of integrating jPlayer into the latest LS? Does anyone have any easy integration instructions?
The topic has been locked.
9 years 11 months ago - 9 years 7 months ago #94628
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Short Audio Clips for Surveys - Hosting/Streaming Advice
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}
Add this code to your template.js file:
Add this to the end of template.css:
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.
Here's a working LimeSurvey 2.0 template and survey:
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:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last edit: 9 years 7 months ago by tpartner.
The topic has been locked.
9 years 11 months ago #94629
by spessex
Replied by spessex on topic Short Audio Clips for Surveys - Hosting/Streaming Advice
That's fantastic. Thank you Tony. Much appreciated.
PS Do you happen to know how effective jPlayer is? Basically I'm just trying to ascertain the best media player solution to ensure most devices and browsers will play the media (and I'm hoping jPlayer is the correct choice).
PS Do you happen to know how effective jPlayer is? Basically I'm just trying to ascertain the best media player solution to ensure most devices and browsers will play the media (and I'm hoping jPlayer is the correct choice).
The topic has been locked.
9 years 11 months ago - 9 years 11 months ago #94631
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Short Audio Clips for Surveys - Hosting/Streaming Advice
For that project, we tested on just about everything except iPad. We tested IE7-10, Firefox, Chrome, Win and Linux.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 9 years 11 months ago by c_schmitz.
The topic has been locked.
9 years 11 months ago #94763
by spessex
Replied by spessex on topic Short Audio Clips for Surveys - Hosting/Streaming Advice
Hi Tony
I've been comparing your instructions against those in the jPlayer Quick Start Guide and was hoping you might be able to clarify a few things as I'm getting a little confused.
Re: 'Add this code to your template.js file:' is this your own created code only I can't find reference to this in the jPlayer quick start guide? ( www.jplayer.org/latest/quick-start-guide/step-1/ )
Additionally where jPlayer quick start also integrates the video player can you advise where I should actually add the code in LS described in www.jplayer.org/latest/quick-start-guide/step-6-video/ and the code described in www.jplayer.org/latest/quick-start-guide/step-7-video/ ?
Thanks in advance.
I've been comparing your instructions against those in the jPlayer Quick Start Guide and was hoping you might be able to clarify a few things as I'm getting a little confused.
Re: 'Add this code to your template.js file:' is this your own created code only I can't find reference to this in the jPlayer quick start guide? ( www.jplayer.org/latest/quick-start-guide/step-1/ )
Additionally where jPlayer quick start also integrates the video player can you advise where I should actually add the code in LS described in www.jplayer.org/latest/quick-start-guide/step-6-video/ and the code described in www.jplayer.org/latest/quick-start-guide/step-7-video/ ?
Thanks in advance.
The topic has been locked.