Audio (mp3 + SoundCloud) en SharePoint 2013 con JSLink

Aqui les traigo, como hacer un audio cualquier sea que sea (mp3) con SoundCloud o cualquier tipo de extensión.. Fun code!!!

(function ($) {
var audioEngine = {
item: function(ctx) {
var itemHTML = ”;
var defaultIcon = “/_layouts/15/images/audiopreview.png”;
try
{
var style = ”;
var title_sound = ctx.CurrentItem[“Title”];
var fecha_sound = ctx.CurrentItem[“Fecha_x0020_del_x0020_art_x00ed_”];
var resumen_sound = ctx.CurrentItem[“Resumen_x0020_del_x0020_articulo”];
var tags = ‘Sin Audio’; //ctx.CurrentItem[“FileRef”];
var download = ”;
var audio_sound = ctx.CurrentItem[“Enlace_x0020_SoundCloud”];
var audio_mp3 = ctx.CurrentItem[“URL_x0020_Audio”];

var ciudad_sound = ctx.CurrentItem[“Ciudad_x0020_de_x0020_Origen”].Label;
var categoria_sound = ctx.CurrentItem[“Categor_x00ed_a_x0020_del_x0020_”].Label;
//execRequest(“Ciudad_x0020_de_x0020_Origen”, ctx.CurrentItem[“Enlace_x0020_SoundCloud”]);
//execRequest(“Categor_x00ed_a_x0020_del_x0020_”, ctx.CurrentItem[“Categor_x00ed_a_x0020_del_x0020_”]);

if(audio_sound.length > 0 && audio_mp3.length == 0){
tags = audio_sound.replace(‘height=”450″‘,’height=”168px”‘);
tags = tags.replace(‘width=”100%”‘,’width=”300px”‘);
download = “<p></p>”;
}else if (audio_sound.length == 0 && audio_mp3.length > 0){
style = ”;
tags = “<img src=’/_layouts/15/images/audiopreview.png’ alt=” style=’width: 100%’/>” +
“<audio controls=’controls’ style=’width: 300px’>” +
“<source src='” + audio_mp3 + “‘ type=’audio/mpeg’ />” +
“Su navegador no soporta la reproducción nativa de Audio.” +
“</audio>”;
download = “<p><a href='”+ audio_mp3 +”‘>Descargar el archivo de audio</a></p>”;
}
itemHTML = “

“;
itemHTML = itemHTML + ”

“;
itemHTML = itemHTML + tags;
itemHTML = itemHTML + ”

“;
itemHTML = itemHTML + ”

“;
itemHTML = itemHTML + ”

” + title_sound + “

“;
itemHTML = itemHTML + ”

“;
itemHTML = itemHTML + ” <p>”;
itemHTML = itemHTML + ” <strong>” + ciudad_sound +’ – ‘+ fecha_sound + “</strong>” + ” – ” + resumen_sound;
itemHTML = itemHTML + ” </p>”;
itemHTML = itemHTML + ” <p>Categor&iacute;a: ” + (categoria_sound ? categoria_sound : “Programa radial”) + “</p>”;
itemHTML = itemHTML + download;
itemHTML = itemHTML + ”

“;
itemHTML = itemHTML + ”

“;
itemHTML = itemHTML + “</div>”;
return itemHTML;
}
catch(e)
{
return “”;
}
},
pagingControl: function (ctx) {
var firstRow = ctx.ListData.FirstRow;
var lastRow = ctx.ListData.LastRow;
var prev = ctx.ListData.PrevHref;
var next = ctx.ListData.NextHref;
var html = “

“;
html += prev ? “” : “”;
html += “” + firstRow + “” + lastRow + ““;
html += next ? “” : “”;
html += “

“;

return “</div>” + html;
}
}

var audioContext = {};
debugger;
audioContext.Templates = {};
audioContext.Templates.Header = “<div class=’Audio’>”;
audioContext.Templates.Footer = audioEngine.pagingControl;
audioContext.Templates.Item = audioEngine.item;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(audioContext);
})();

y termina con un lindo objeto que toca embeber mediante código …. O meterlo como un objeto así:

Screenshot_1

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s