para ocultar el acceso directo al url de un archivob mp3 encripte su nombre en la subida y lo almacene en la bd con laravel, pero ahora me encuentro con el problema que no se como desencriptarlo en mi reproductor.js para que obter la cadena original donde esta la url hacia el archivo
mi reproductor js toma el url desde una vista en la etiqueta html data-src="path-a-mi-archivo" que esta encriptada a continuacion el codigo js:
(function ($) {
"use strict";
if($('.playlist').length == 0) return;
var playlist = $( '.playlist' ).mepPlaylist({
audioHeight: '40',
audioWidth: '100%',
videoHeight: '40',
videoWidth: '100%',
audioVolume: 'vertical',
mepPlaylistLoop: true,
alwaysShowControls: true,
mepSkin: 'mejs-audio',
mepResponsiveProgress: true,
mepSelectors: {
playlist: '.playlist',
track: '.track',
tracklist: '.tracks'
},
features: [
'meplike',
'mepartwork',
'mepcurrentdetails',
'mepplaylist',
'mephistory',
'mepprevioustrack',
'playpause',
'mepnexttrack',
'progress',
'current',
'duration',
'volume',
'mepicons',
'meprepeat',
'mepshuffle',
'mepsource',
'mepbuffering',
'meptracklist',
'mepplaylisttoggle',
'youtube'
],
// get player, then you can use the player.mepAdd(), player.mepRemove(), player.mepSelect()
var player = playlist.find('audio, video')[0].player;
// event on like btn
player.$node.on('like.mep', function(e, trackid){
$('[track-id='+trackid+']').toggleClass('is-like');
});
// event on play
player.$node.on('play', function(e){
updateDisplay();
});
// event on pause
player.$node.on('pause', function(e){
updateDisplay();
});
// update when pjax end
$(document).on('pjaxEnd', function() {
updateDisplay();
});
// simulate the play btn
$(document).on('click.btn', '.btn-playpause', function(e){
e.stopPropagation();
var self = $(this);
if( self.hasClass('is-playing') ){
self.removeClass('is-playing');
player.pause();
}else{
var item = getItem(self);
item && player.mepAdd(item, true);
}
});
function updateDisplay(){
$('[data-id]').removeClass('active').find('.btn-playpause').removeClass('is-playing').parent().removeClass('active');
var track = player.mepGetCurrentTrack();
if(!track || !track.id) return;
var item = $('[data-id="'+track.id+'"]');
if( player.media.paused ){
item.removeClass('active').find('.btn-playpause').removeClass('is-playing').parent().removeClass('active');
}else{
item.addClass('active').find('.btn-playpause').addClass('is-playing').parent().addClass('active');
}
}
// get item data, you can use ajax to get data from server
function getItem(self){
var item = self.closest('.item');
// track detail
if(!item.attr('data-src')){
self.toggleClass('is-playing');
$('#tracks').find('.btn-playpause').first().trigger('click');
return false;
}
var obj = {
meta: {
author: item.find('.item-author').find('a').text()
,authorlink : item.find('.item-author').find('a').attr('href')
}
,src: self.closest('[data-src]').attr("data-src")
,thumb: {
src: item.find('.item-media-content').css("background-image").replace(/^url\(["']?/, '').replace(/["']?\)$/, '')
}
,title: item.find('.item-title').find('a').text()
,link: item.find('.item-title').find('a').attr('href')
,id: self.attr("data-id") ? self.attr("data-id") : self.closest('[data-id]').attr("data-id")
};
return obj;
}
})(jQuery);
y el codigo de mi vista:
<div class="row item-grid " >
@isset($datos)
@foreach($datos as $dato)
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="item r item-track" data-dir="storage/songs" id="song" data-src="storage/songs/{{$dato->name_song}}">
<div id="info"></div>
<div class="item-media ">
<a href="http://flatfull.com/wp/pulse/track/pink-floyd-another-brick-in-the-wall-will-barber-the-voice-2017-blind-audition/" class="item-media-content" style="background-image: url(http://flatfull.com/wp/pulse/wp-content/uploads/2019/04/Wizkid-Fever-mp3-image-300x300.jpg);"></a>
<div class="item-overlay center">
<button class="btn-playpause">Play</button>
</div>
</div>
<div class="item-info">
<div class="item-overlay bottom text-right">
<a class="btn-like " data-site-id="1" data-post-id="1120" data-count="0">
<span class="">
<i class="fa fa-heart-o"></i>
<i class="active fa fa-heart text-primary"></i>
</span>
</a>
<a href="#" class="btn-more" data-toggle="dropdown"><i class="fa fa-ellipsis-h"></i></a>
<div class="dropdown-menu pull-right l-h grey lt"></div>
</div>
<div class="item-title text-ellipsis">
<a href="http://flatfull.com/wp/pulse/track/pink-floyd-another-brick-in-the-wall-will-barber-the-voice-2017-blind-audition/">Pink Floyd – {{$dato->nombre_song}} | Will Barber| The Voice 2017| Blind Audition</a>
</div>
<div class="item-author text-sm text-ellipsis text-muted">
<a href="http://flatfull.com/wp/pulse/user/admin/" title="Posts by Pablo Nouvelle" rel="author">Pablo Nouvelle</a>
</div>
</div>
</div>
</div>
@endforeach
@else
<li>Aun no hay musica en la biblioteca :c</li>
@endisset
</div>
realmente no se como funciona javascript, nunca lo he usado y estoy muy confundido sobre como podria desifrar la direccion de mi archivo mp3, espero puedan ayudarme a corregirlo