4

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);
5
  • El reproductor de JS necesita la URL del mp3. URL que le pases, URL desde la que se va a poder descargar el archivo. Podrás hacer más o menos difícil que alguien lo descargue, pero imposible de bloquear.
    – azeós
    Commented el 11 jun. 2019 a las 3:56
  • y donde la agregaria si la paso mediante una variable ya que la ruta esta en la base de datos? Commented el 11 jun. 2019 a las 4:01
  • Podrías guardar la URL en una cookie desde PHP y leerla desde JS si te preocupa que la URL quede visible en el código HTML. Pero desde la consola del explorador igual se vería la URL del mp3.
    – azeós
    Commented el 11 jun. 2019 a las 4:04
  • A lo más puedes obfuscar la descarga un poco, como lo hace youtube (te envían el video por pedazos que en si no significan nada) pero que igual alguien podría juntar a mano para recrear el video entero
    – IGP
    Commented el 17 nov. 2021 a las 13:32
  • Utiliza URL.createObjectURL para que solo el objeto que lo cargue pueda hacer uso de este mismo, los datos creados por medio de URL.createObjectURL no estaran disponibles en linea desde esa URL y solo la imagen / video / etc podra cargarlo, ademas, es un metodo instantaneo.
    – Layer
    Commented el 6 jul. 2023 a las 1:59

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.