手动启停播放网易云音乐

起个网名好难 发表于 2024-4-17 16:01

本帖最后由起个网名好难于 2024-4-17 20:53 编辑 <br /><br /><style>
#oBlk {
width: 960px;
height: 600px;
position: relative;
overflow: hidden;
margin: 16px auto 32px calc(50% - 561px);
border: 2px brown solid;
background-color: pink;
}

#iBlk {
width: 100%;
height: 90%;
position: absolute;
overflow: hidden;
left: 0px;
bottom: 0px;
border: none;
}

#vid {
width: 115%;
position: absolute;
left: 0px;
bottom: 0px;
}

#oBlk input {
margin-top: 16px;
}

#canv {
width: 100%;
height: 80%;
z-index: 99;
position: absolute;
bottom: 0px;
left: 0px;
}
</style>
<div id="oBlk"> 　输入网易云音乐链接： <input id="mp3url" size='64'></input>　 <input id="sPlay" type="button" value="播放"></input>　
<div id="iBlk">
<video src="https://img.tukuppt.com/video_show/2418175/00/08/27/5d1c4c4ac8884.mp4" muted loop id="vid"></video>
<canvas id="canv" title="点击播放"></canvas>
</div>
</div>
<script>
const aud = new Audio();
aud.crossOrigin = 'anonymous';
aud.loop = true;
sPlay.onclick = () => {
if (aud.paused) {
   sPlay.value = '清除'
} else {
   mp3url.value = '';
   vid.pause();
   aud.pause();
   sPlay.value = '播放'
   return false;
}
aud.src = mp3url.value;
aud.load();
aud.play();
aud.onplaying = () => vid.play();
oCtx = new(window.AudioContext || window.webkitAudioContext)();
var audioSrc = oCtx.createMediaElementSource(aud);
var analyser = oCtx.createAnalyser();
audioSrc.connect(analyser);
analyser.connect(oCtx.destination);

// 利用cancas渐变进行音频绘制
var ctx = canv.getContext('2d');
//this.canv.width = this.lrcShowObj.parentNode.offsetWidth;
//this.canv.height = this.lrcShowObj.parentNode.offsetHeight;
var oW = canv.width;
var oH = canv.height;
var color1 = ctx.createLinearGradient(oW / 2, oH - 30, oW / 2, oH - 100);
color1.addColorStop(0, `hsl(120, 30%, 70%)`);
color1.addColorStop(.35, `hsl(60, 60%, 70%)`);
color1.addColorStop(1, `hsl(0, 90%, 70%)`);

var count = 128;
var voiceHeight = new Uint8Array(analyser.frequencyBinCount);
(function draw() {
   analyser.getByteFrequencyData(voiceHeight);
   var step = Math.round(voiceHeight.length / count);
   ctx.clearRect(0, 0, oW, oH);
   for (var i = 0; i < count; i++) {
   var audioHeight = voiceHeight / 2;
   ctx.fillStyle = color1;
   ctx.fillRect(oW / 2 + (i * 5), oH, 4, -audioHeight);
   ctx.fillRect(oW / 2 - (i * 5), oH, 4, -audioHeight);
   }
   requestAnimationFrame(draw);
})();
}
</script>

<hr>
<li>用Web Audio API 实现音频的可视化效果需要 1.代码和音乐是同源的或 2.存放音乐的网站允许跨域访问</li>
<li>能存放音乐的空间或能外链的音乐网站比较容易找到，但要找个能允许上传代码和音乐的就不太容易了</li>
<li>网易云音乐的歌曲链接刚好可以允许跨域访问，但链接只是个有时间限制的暂时链接如果做在代码中不能避免它失效</li>
<li>使用网易云音乐的链接绕过跨域，手动输入当时有效的链接避免了失效问题</li>
<li>QQ音乐似乎也可以播放只是获取链接麻烦点</li>
<hr>
<li>接受的歌曲格式形如</li>
<li>https://m801.music.126.net/20240417125433/60c4107814338d48cc24ff271aa7605c/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/16251678235/5896/c9e5/3295/609a64ddefd872d8e0d3dab745c92a4d.mp3</li>
<li>或<br>https://m801.music.126.net/20240417123515/1c4e95b7a8e34628e2cfc8dccd6d6fb5/jdyyaac/5608/0353/0e0b/ab149daafb49212757109ad40fed749d.m4a</li>

红影发表于 2024-4-17 16:32

没弄明白怎么玩，我输入网易云音乐地址，好像放不出来啊{:4_173:}

红影发表于 2024-4-17 16:41

试过了，网易云的不行，没法跨域。这个只能是跨域音乐才行。找了一首可跨域的，看到效果了{:4_199:}

红影发表于 2024-4-17 16:43

视频和频谱都好漂亮啊，好像没找到暂停按钮？

樵歌发表于 2024-4-17 16:45

我也输入了网易云音乐地址，也没放出来

起个网名好难 发表于 2024-4-17 16:48

红影发表于 2024-4-17 16:32
没弄明白怎么玩，我输入网易云音乐地址，好像放不出来啊

打开网易云音乐 --》找到歌曲 --》按 F12 或右键“检查” --》网络 --》媒体 --》在页面左边点击播放 --》到右边复制URL --》粘贴到页面里播放

起个网名好难 发表于 2024-4-17 16:51

红影发表于 2024-4-17 16:41
试过了，网易云的不行，没法跨域。这个只能是跨域音乐才行。找了一首可跨域的，看到效果了
或者 https://music.163.com/song/media/outer/url?id={歌曲ID}.mp3 到新页面打开，然后复制地址栏里的实际链接地址。

起个网名好难 发表于 2024-4-17 16:53

樵歌发表于 2024-4-17 16:45
我也输入了网易云音乐地址，也没放出来

直接输入 https://music.163.com/song/media/outer/url?id={歌曲ID}.mp3 这样的链接形式是不行的，看7# 转换一下。

起个网名好难 发表于 2024-4-17 16:55

红影发表于 2024-4-17 16:43
视频和频谱都好漂亮啊，好像没找到暂停按钮？

没有暂停，只做了结束（清除）

红影发表于 2024-4-17 17:56

起个网名好难发表于 2024-4-17 16:48
打开网易云音乐 --》找到歌曲 --》按 F12 或右键“检查” --》网络 --》媒体 --》在页面左边点 ...

我去找了一下，得到的地址是
https://m804.music.126.net/20240417181834/d7c0b7c741ce2c7c0a5bcc40994a6501/jdyyaac/obj/w5rDlsOJwrLDjj7CmsOj/13898801590/9fe4/e54a/9aca/2d892018b69215a898ac50f5556a91eb.m4a?authSecret=0000018eeb79d60c0e3c0aaba0ae25c4

粘贴到里面还是不行呢。

红影发表于 2024-4-17 18:03

起个网名好难发表于 2024-4-17 16:51
或者 https://music.163.com/song/media/outer/url?id={歌曲ID}.mp3 到新页面打开，然后复制地址栏里的实 ...

这个可以了，用这个方法得到的地址是
http://m801.music.126.net/20240417182538/212dadc46469c198bac0c43259175852/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/28481670469/267f/4c30/00a0/938c47785d75fe13cf6d320daa59e602.mp3

奇怪，这首歌是可以的，前面试的另一首歌网易里直接找的不行。后者用这个方式去找地址比网易云里直接找的更可靠吧{:4_173:}

红影发表于 2024-4-17 18:05

原来网易云的歌曲也可以跨域的。太好了，谢谢难难。{:4_199:}

起个网名好难 发表于 2024-4-17 18:05

红影发表于 2024-4-17 17:56
我去找了一下，得到的地址是
https://m804.music.126.net/20240417181834/d7c0b7c741ce2c7c0a5bcc40994a ...

这可能是没取对，取得链接多是m4a的扩展名。
用7#的法子吧简单些。

红影发表于 2024-4-17 18:07

在网易云里直接找不行，我第一次试听找的地址，开头的是https://m704。。。同一首歌后面一次是https://m804。。。这个m后面是变的，只有用mp3的那种格式找出来的才是m801的吧，这样的才能用。

红影发表于 2024-4-17 18:11

起个网名好难发表于 2024-4-17 16:48
打开网易云音乐 --》找到歌曲 --》按 F12 或右键“检查” --》网络 --》媒体 --》在页面左边点 ...

在这个解说中学习到了怎样找音乐地址。谢谢难难。{:4_187:}

红影发表于 2024-4-17 18:13

起个网名好难发表于 2024-4-17 16:51
或者 https://music.163.com/song/media/outer/url?id={歌曲ID}.mp3 到新页面打开，然后复制地址栏里的实 ...

在这个解说里知道了怎样找网易云的跨域歌曲的方法。这两层楼都太好了。
试验成功，终于知道怎样找那里的跨域了{:4_205:}

红影发表于 2024-4-17 18:13

终于弄明白了，我先吃饭去，一会再来玩{:4_173:}

起个网名好难 发表于 2024-4-17 18:17

红影发表于 2024-4-17 18:07
在网易云里直接找不行，我第一次试听找的地址，开头的是https://m704。。。同一首歌后面一次是https://m804 ...

它只是个有时间限制的链接，至于是801还是其它数值无所谓，取来是多少就是多少。

起个网名好难 发表于 2024-4-17 18:20

红影发表于 2024-4-17 18:03
这个可以了，用这个方法得到的地址是

前一种法子只要打开两个页面，一个帖子和一个网易云音乐
后一种要多一个转换页面。

起个网名好难 发表于 2024-4-17 18:22

红影发表于 2024-4-17 18:11
在这个解说中学习到了怎样找音乐地址。谢谢难难。

qq音乐只能用第一种方法找，麻烦点。

页: [1] 2 3 4 5

花潮论坛's Archiver

手动启停播放网易云音乐