关于网易云音乐http地址的问题

[success]故事还得从我网页的音乐播放器说起，因为个人使用的网易云音乐解析，然后解析音乐是就会莫名奇妙变成http，即使你的链接是https的[/success]

那么我们来看一下这个api，这里我随便拿一个音乐举例。

[block]

https://music.163.com/song/media/outer/url?id=37653546.mp3

[/block]

在浏览器直接输入会播放音乐，但是实际上你看网址就会发现变成了

[block]

http://m10.music.126.net/20190906222039/d6d3a92cd6a11129d2865d83a481d0ef/ymusic/c637/a89f/a510/c30e9d056f01b9fb22a8869e7f613ef1.mp3

[/block]

后面抓包发现其实是302跳转到了这个网址，而且这个网址是http。还无法改。还有就是这个文件是临时的，不能直接使用，所以必须要实时通过api来获取临时音乐地址。

本来我不想管的，但是没办法，有人几次提出，所以就自己花了一晚上的时间去解决这个问题。

看了下源代码，首先是把歌曲都放到一个数组里面，然后js直接使用。

我刚开始是想直接用js获取302重定向后的网址的，但是无奈，谷歌了一大堆，没有解决办法。虽然js无法获取重定向后的地址，但是PHP可以，所以我第二个方法就是自己用PHP把这些网址都替换成302重定向后的地址，但是我发现PHP是直接把这个当一串字符给输出了，无法直接使用。。。

然后本来想放弃的，但是我又突然想到一个好主意，就是自己搞一个api，用js调用api来获取https地址。

我们先看一下音乐播放器的js文件。

主要是通过这个函数来对音乐播放进行赋值，我这里在赋值前先使用ajax发送一个get请求，获取临时音乐播放地址，然后用临时地址替换掉我们的音乐地址。因为ajax是异步执行的，所以我们必须要等待这个请求完毕后在对我们的资源进行修改。实际代码如下：

[highlight lanaguage=”JavaScript”]

/*发出ajax请求获取音乐地址*/
      myajax=$.ajax({
          url:"https://blog.xiaoyou66.com/live2d-api/music/?src="+item.mp3,
          type:'get',
          success:function(res){
              item.mp3=res;
              console.log(res);
          }
      });
      /*等待ajax请求完毕*/
      $.when(myajax).done(function () {
          var newaudio = $('<audio>').html('<source src="'+item.mp3+'"><source src="'+item.ogg+'">').appendTo('#player');
          $('.cover').html('<img src="'+item.cover+'" alt="'+item.album+'">');
          $('.musicTag').html('<strong>'+item.title+'</strong><span> - </span><span class="artist">'+item.artist+'</span>');
          $('#playlist li').removeClass('playing').eq(i).addClass('playing');
          audio = newaudio[0];
          audio.addEventListener('progress', beforeLoad, false);
          audio.addEventListener('durationchange', beforeLoad, false);
          audio.addEventListener('canplay', afterLoad, false);
          audio.addEventListener('ended', ended, false);
          play();
      });

[/highlight]

然后我们在看一下api的代码：

[highlight lanaguage=”PHP”]

$url=$_REQUEST['src'];

if($url) {
    $header = get_headers($url, 1);
    if (strpos($header[0], '301') !== false || strpos($header[0], '302') !== false) {
        if (is_array($header['Location'])) {
            $url=$header['Location'][count($header['Location']) - 1];
            echo str_replace("http:","",$url);
        } else {
            $url=$header['Location'];
            echo str_replace("http:","",$url);
        }
    } else {
        echo $url;
    }
}
else
{
    echo "";
}

[/highlight]

这里就是获取我们发过来的请求，然后使用PHP自带的get_headers函数获取头部信息。如果发现头部信息为301或者302，那么我们就返回跳转的地址，没有就返回原始的url。

虽然原理比较简单，但是因为我对ajax不是很熟悉，还有PHP也只是懂一些基础。所以解决还是用了很久的。感觉前端的东西太多了，还需要继续学习啊。