Estoy practicando con un reproductor de música streaming con Laravel y digo practicando por que no soy desarrollador pero tengo conocimientos básicos, el código funciona bien pero la url directa del archivo mp3 queda al descubierto y al momento de ver el código fuente pueden descargar el archivo, quisiera que el url del mp3 quede oculto sin que bloquee al reproductor JavaScript y recurro a esta comunidad porque no tengo idea de como obtener la ruta del mp3 sin que el user lo vea.
En mi blade hay una etiqueta llamada data-src=
es donde incluyo la url del archivo mediante una variable extraida de la base de datos y es la que recibe la ruta del archivo que en este caso esta dentro de Storage/songs/cancion.mp3
funciona a la perfeccción recibe el archivo pero repito puedo ver la url directa y por consecuencia descargar el mp3
A continuación dejo el código de mi blade espero puedan iluminarme con su conocimiento:
<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-src="{{$dato->name_song}}">
<div class="item-media ">
<a href="#" 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
y el codigo en el player.js que recibe el archivo:
(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'
],
mepPlaylistTracks: [
{
"id": "item-1",
"title": "Pull Up",
"except": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quamquam tu hanc copiosiorem etiam soles dicere. Nihil illinc huc pervenit.",
"link": "track.detail.html",
"thumb": { "src": "images/b0.jpg" },
"src": "http://api.soundcloud.com/tracks/269944843/stream?client_id=a10d44d431ad52868f1bce6d36f5234c",
"meta": {
"author": "Summerella",
"authorlink": "artist.detail.html",
"date": "30.05.2016",
"category": "Blue",
"tag": "Holiday",
"play": 3200,
"like": 210,
"duration": "2:50"
}
},
{
"id": "item-2",
"title": "Fireworks",
"except": "Hidem saepe faciamus. Quid ad utilitatem tantae pecuniae? Utram tandem linguam nescio? Sed hoc sane concedamus.",
"link": "track.detail.html",
"thumb": { "src": "images/b1.jpg" },
"src": "http://api.soundcloud.com/tracks/259445397/stream?client_id=a10d44d431ad52868f1bce6d36f5234c",
"meta": {
"author": "Kygo",
"authorlink": "artist.detail.html",
"date": "02.05.2016",
"category": "Jazz",
"play": 30,
"like": 10,
"duration": "4:25"
}
},
{
"id": "item-3",
"title": "I Wanna Be In the Cavalry",
"except": "Tantae pecuniae? Utram tandem linguam nescio? Sed hoc sane concedamus.",
"link": "track.detail.html",
"thumb": { "src": "images/b2.jpg" },
"src": "http://api.soundcloud.com/tracks/79031167/stream?client_id=a10d44d431ad52868f1bce6d36f5234c",
"meta": {
"author": "Jeremy Scott",
"authorlink": "artist.detail.html",
"date": "09.04.2016",
"category": "DJ",
"play": 300,
"like": 10,
"duration": "2:50"
}
}
]
});
// 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);
URL.createObjectURL
para que solo el objeto que lo cargue pueda hacer uso de este mismo, los datos creados por medio deURL.createObjectURL
no estaran disponibles en linea desde esaURL
y solo la imagen / video / etc podra cargarlo, ademas, es un metodo instantaneo.