- Posts: 12
- Thank you received: 0
Ask the community, share ideas, and connect with other LimeSurvey users!
<!-- 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>
$(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 }); }); } });
/******** 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; }
<div class="audioSource">question_1.mp3</div>
1. How exactly do I "Create a new "audio" directory in [my] template directory" ?Create a new "audio" directory in your template directory and upload your audio files there.
3. Sorry, which template? (and by this I suppose you mean the 'Question page', 'Load page', 'template.js', 'template.css' etc. of the current template ('copy_of_default', 'copy_of basic' etc.) ?)Download the jPlayer plugin and add these to your template:
- Jplayer.swf
- jquery.jplayer.min.js
- The "skin" folder
5. Does it matter which page? ('Welcome page', 'Question page', 'Load page' etc.)Add this to startpage.pstpl after {TEMPLATEJS}
<link rel="shortcut icon" href="{TEMPLATEURL}favicon.ico" />
7. Does it matter which page? (as above)Add this code to your template.js file:
9. Does it matter which page? (as above)Add this to the end of template.css:
Do this with your FTP client (like FileZilla )1. How exactly do I "Create a new "audio" directory in [my] template directory" ?
Upload these files with the FTP client - most are drag-and-drop.2. Once it's created, is it then just a question of browsing through my audio files and uploading the one(s) that I want?
Again, upload these files with the FTP client. So, if your template is "copy_of_basic", they would go in /uploads/templates/copy_of_basic/.3. Sorry, which template?
You will just upload those complete files and the folder. not modify any existing files at this point.4. All in the same place
Nope, doesn't matter, all of those views access the same startpge.pstpl file.5. Does it matter which page?
After {TEMPLATEJS}, so it should look like this:6. Before, after or instead of the line of code:
Same answer as above, there is only one template.js file in your template.7. Does it matter which page?
At the end.8. Anywhere in the 'template.js' file?
Same answer as above, there is only one template.css file in your template.9. Does it matter which page?
Did you import the attached template first and then assign it to that survey?I imported and ran the sample survey that you posted...
If you follow my steps, I don't think you need to worry about that.Finally (!!), Mr Spessex's questions in his post #94763 look ominous...
<filename>scripts/jPlayer-2.9.2/dist/jplayer/jquery.jplayer.min.js</filename>
<filename>scripts/jPlayer-2.9.2/dist/skin/pink.flag/css/jplayer.pink.flag.css</filename>
<div id="jp_container_{QID}" class="jp-video " role="application" aria-label="media player"> <div class="jp-type-single"> <div id="jquery_jplayer_{QID}" class="jp-jplayer"></div> <div class="jp-gui"> <div class="jp-video-play"> <button class="jp-video-play-icon" role="button" tabindex="0">play</button> </div> <div class="jp-interface"> <div class="jp-progress"> <div class="jp-seek-bar"> <div class="jp-play-bar"></div> </div> </div> <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div> <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div> <div class="jp-details"> <div class="jp-title" aria-label="title">&nbsp;</div> </div> <div class="jp-controls-holder"> <div class="jp-volume-controls"> <button class="jp-mute" role="button" tabindex="0">mute</button> <button class="jp-volume-max" role="button" tabindex="0">max volume</button> <div class="jp-volume-bar"> <div class="jp-volume-bar-value"></div> </div> <div style="clear:both"></div> </div> <div class="jp-controls"> <button class="jp-play" role="button" tabindex="0">play</button> <button class="jp-stop" role="button" tabindex="0">stop</button> <div style="clear:both"></div> </div> <div class="jp-toggles"> <button class="jp-repeat" role="button" tabindex="0">repeat</button> <button class="jp-full-screen" role="button" tabindex="0">full screen</button> <div style="clear:both"></div> </div> </div> </div> </div> <div class="jp-no-solution"> <span>Update Required</span> To play the media you will need to either update your browser to a recent version or update your <a href="https://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>. </div> </div> </div>
<script type="text/javascript"> $(document).ready(function(){ var thisQuestion = $('#question{QID}'); function resizePlayer() { var playerWidth = $('#jquery_jplayer_{QID}').width(); var aspectRatio = { 'width': 16, 'height': 9 }; var playerHeight = (playerWidth*aspectRatio.height)/aspectRatio.width; $('#jquery_jplayer_{QID}').css('height', playerHeight+'px'); $('#jquery_jplayer_{QID} img').css('height', playerHeight+'px'); $('#jp_container_{QID} .jp-video-play').css({ 'height': playerHeight+'px', 'margin-top': '-'+playerHeight+'px' }); } $(window).resize(function() { resizePlayer(); }); $('#jquery_jplayer_{QID}').jPlayer({ ready: function () { resizePlayer(); $(this).jPlayer("setMedia", { title: "Big Buck Bunny Trailer", m4v: "https://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v", ogv: "https://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv", poster: "https://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png" }); }, cssSelectorAncestor: "#jp_container_{QID}", swfPath: "{TEMPLATEURL}scripts/jPlayer-2.9.2/dist/jplayer", supplied: "m4v, ogv", useStateClassSkin: true, autoBlur: false, smoothPlayBar: true, keyEnabled: true, remainingDuration: true, toggleDuration: true, size: { 'width': '100%', 'height': 'auto', 'cssClass': 'jp-video-ls' // Custom class for LimeSurvey } }); }); </script>
/*** jPlayer Styles & Overrides ***/ .jp-video, .jp-video div { box-sizing: content-box; } .jp-video { width: 100%; max-width: 640px; margin: 0 auto; } .jp-video .jp-video-play { height: 360px; margin-top: -360px; } @media only screen and (max-width: 700px) { .jp-video { max-width: 400px; } } @media only screen and (max-width: 480px) { .container, .questiontext { padding-left: 0; padding-right: 0; } #main-col { padding-left: 3px; padding-right: 3px; } .jp-video .jp-interface .jp-controls-holder { width: 340px; } .jp-video .jp-interface .jp-controls-holder > div { } .jp-video .jp-interface .jp-volume-controls { display: none !important; } .jp-video .jp-interface .jp-controls { display: block !important; float: none !important; margin: 0 auto !important;; } .jp-video .jp-interface .jp-toggles { display: block !important; float: none !important; position: relative; margin: 10px auto 0 auto !important;; } .jp-video .jp-interface .jp-toggles .jp-full-screen { float: right; } }