{{^element.frozen}} {{#js}} require(['jquery','core/log', 'filter_poodll/soundtouch', 'filter_poodll/wavesurfer', 'filter_poodll/mediaparser'], function($, log, soundtouch, WaveSurfer, parser) { log.debug('running js in poodllaudio temlate'); var app = { options: {}, captions: {}, strToSecs: function(str) { var elements = str.split(/[:.]/); var hours = parseInt(elements[0]); var mins = parseInt(elements[1]); var secs = parseInt(elements[2]); var ms = parseInt(elements[3]); return (60 * 60 * hours) + (60 * mins) + secs + (ms / 1000); }, loadVTT: function(vtturl, callback) { //create dummy player var player = document.createElement("audio"); player.crossOrigin = 'anonymous'; //create subtitle track var track = document.createElement("track"); track.kind = "captions"; track.label = "English"; track.srclang = "en"; track.src = vtturl; //set to player, it will load player.appendChild(track); var texttrack = player.textTracks[0]; texttrack.mode = "showing"; //set event to fire when loads and return cues in callback track.addEventListener("load", function() { callback(texttrack.cues); }); }, fancyTimeFormat: function(time) { // Hours, minutes and seconds var hrs = ~~(time / 3600); var mins = ~~((time % 3600) / 60); var secs = ~~time % 60; // Output like "1:01" or "4:03:59" or "123:03:59" var ret = ""; ret += "" + hrs + ":" + (mins < 10 ? "0" : ""); ret += "" + mins + ":" + (secs < 10 ? "0" : ""); ret += "" + secs; return ret; }, getCaption: function() { var duration = app.wavesurfer.getDuration().toFixed(2); var currentTime = app.wavesurfer.getCurrentTime().toFixed(2); var matches = Object.values(app.captions).filter(function(e) { return currentTime > e.startTime && currentTime < e.endTime }); if (matches.length) { $("#{{AUTOID}}_poodll-super-player-captions").text(matches[0].text); } else { $("#{{AUTOID}}_poodll-super-player-captions").text(""); } $("#{{AUTOID}}_poodll-super-player-time").text(app.fancyTimeFormat(currentTime) + "/" + app.fancyTimeFormat(duration)); }, initSoundTouch: function() { app.st = new soundtouch.SoundTouch( app.wavesurfer.backend.ac.sampleRate ); var buffer = app.wavesurfer.backend.buffer; var channels = buffer.numberOfChannels; var l = buffer.getChannelData(0); var r = channels > 1 ? buffer.getChannelData(1) : l; app.length = buffer.length; app.seekingPos = null; var seekingDiff = 0; app.source = { extract: function(target, numFrames, position) { if (app.seekingPos != null) { seekingDiff = app.seekingPos - position; app.seekingPos = null; } position += seekingDiff; for (var i = 0; i < numFrames; i++) { target[i * 2] = l[i + position]; target[i * 2 + 1] = r[i + position]; } return Math.min(numFrames, app.length - position); } }; }, init: function(options) { //The template seems to run this code twice, possibly because of the end tag. // So we check/set a flag to prevent 2x running if($('#{{AUTOID}}_poodll-super-player').data('inited')!==undefined){return;} $('#{{AUTOID}}_poodll-super-player').data('inited', true); //set options app.options = options; if (app.options.hasImage) { $("#{{AUTOID}}_poodll-super-player-image").css("background-image", "url(" + app.options.image + ")"); } else { $("#{{AUTOID}}_poodll-super-player-image").hide(); } app.wavesurfer = WaveSurfer.create({ container: '#{{AUTOID}}_poodll-super-player-waveform', height: 75, cursorColor: 'red', barHeight: 4, barWidth: 4, fillParent: true, responsive: true }); app.wavesurfer.load(app.options.audio); if (app.options.hasVtt) { app.loadVTT(app.options.vtt, function(captions) { app.captions = captions; }); //set right to left if necessary switch(app.options.lang){ case 'ar-AE': case 'ar-SA': case 'fa-IR': case 'he-IL': $("#{{AUTOID}}_poodll-super-player-captions").addClass('filter_poodll_rtl'); break; } } else { $("#{{AUTOID}}_poodll-super-player-captions").hide(); } app.wavesurfer.on("play", function() { app.seekingPos = ~~(app.wavesurfer.backend.getPlayedPercents() * app.length); app.st.tempo = app.wavesurfer.getPlaybackRate(); if (app.st.tempo === 1) { app.wavesurfer.backend.disconnectFilters(); } else { if (!app.soundtouchNode) { var filter = new soundtouch.SimpleFilter(app.source, app.st); app.soundtouchNode = soundtouch.getWebAudioNode( app.wavesurfer.backend.ac, filter ); } app.wavesurfer.backend.setFilter(app.soundtouchNode); } }); app.wavesurfer.on("ready", function() { $("#{{AUTOID}}_poodll-super-player-waveform").css("background-image", "none"); app.getCaption(); app.initSoundTouch(); }) app.wavesurfer.on("pause", function() { app.soundtouchNode && app.soundtouchNode.disconnect(); }); app.wavesurfer.on("finish", function() { $("#{{AUTOID}}_play-pause").html(""); }); app.wavesurfer.on("audioprocess", function() { app.getCaption(); }); app.wavesurfer.on("seek", function() { app.seekingPos = ~~(app.wavesurfer.backend.getPlayedPercents() * app.length); app.getCaption(); }); $("#{{AUTOID}}_poodll-super-player-step-backward").on("click keydown", function(e) { if ([32, 13].includes(e.keyCode) || e.keyCode == undefined) { e.preventDefault() app.wavesurfer.seekTo(0); app.getCaption(); } }) $("#{{AUTOID}}_poodll-super-player-backward").on("click keydown", function(e) { if ([32, 13].includes(e.keyCode) || e.keyCode == undefined) { e.preventDefault() app.wavesurfer.skipBackward(); app.getCaption(); } }) $("#{{AUTOID}}_poodll-super-player-play").on("click keydown", function(e) { if ([32, 13].includes(e.keyCode) || e.keyCode == undefined) { e.preventDefault() if (!app.wavesurfer.isPlaying()) { app.wavesurfer.play(); $("#{{AUTOID}}_play-pause").html(""); } else { app.wavesurfer.pause(); $("#{{AUTOID}}_play-pause").html(""); } } }) $("#{{AUTOID}}_poodll-super-player-forward").on("click keydown", function(e) { if ([32, 13].includes(e.keyCode) || e.keyCode == undefined) { e.preventDefault() app.wavesurfer.skipForward(); app.getCaption(); } }); $("#{{AUTOID}}_poodll-super-player-step-forward").on("click keydown", function(e) { if ([32, 13].includes(e.keyCode) || e.keyCode == undefined) { e.preventDefault() app.wavesurfer.seekTo(1); app.getCaption(); } }); $("#{{AUTOID}}_poodll-super-player-speed-up").on("click keydown", function(e) { if ([32, 13].includes(e.keyCode) || e.keyCode == undefined) { e.preventDefault() var currentRate = app.wavesurfer.getPlaybackRate(); if (currentRate < 2) { app.wavesurfer.setPlaybackRate(currentRate + 0.1); $("#{{AUTOID}}_poodll-super-player-playback-rate").text("x" + app.wavesurfer.getPlaybackRate().toFixed(1)); } } }); $("#{{AUTOID}}_poodll-super-player-speed-down").on("click keydown", function(e) { if ([32, 13].includes(e.keyCode) || e.keyCode == undefined) { e.preventDefault() var currentRate = app.wavesurfer.getPlaybackRate(); if (currentRate > 0.6) { app.wavesurfer.setPlaybackRate(currentRate - 0.1); $("#{{AUTOID}}_poodll-super-player-playback-rate").text("x" + app.wavesurfer.getPlaybackRate().toFixed(1)); } } }); var sizes = { "big": 550, "medium": 400, "small": 300 } $("#{{AUTOID}}_poodll-super-player").css("max-width", sizes[app.options.size] + "px"); } }; // end of app definition //fetch the media url var mediadetails = parser.parse('{{AUTOID}}_original', 'audio'); var options={}; options.hasVtt = mediadetails.subtitlesurl ? true : false; options.vtt= mediadetails.subtitlesurl; //"https://s3.amazonaws.com/poodll-audioprocessing-out-us-east-1/CP/365/jjustin/misc.poodll.com/21232f297a57a5a743894a0e4a801fc3/poodllfile5ec34af9814891.mp3.vtt", options.audio= mediadetails.mediaurl;//"https://s3.amazonaws.com/poodll-audioprocessing-out-us-east-1/CP/365/jjustin/misc.poodll.com/21232f297a57a5a743894a0e4a801fc3/poodllfile5ec34af9814891.mp3", options.lang=mediadetails.lang; options.captions= []; options.waveform= true; options.hasImage= mediadetails.imgurl ? true : false; options.image = mediadetails.imgurl; options.size = '{{size}}'; app.init(options); }); //end of script {{/js}} {{/element.frozen}}