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);
4
  • 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
    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? 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
    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
    el 17 nov. 2021 a las 13:32

0

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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