生活随笔
收集整理的這篇文章主要介紹了
网易云歌曲下载
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前期準備
1.所下載歌曲需網易云音樂有版權播放；
2.由于未找到歌曲搜索相關API，故歌曲ID由網易云音樂地址欄獲取。
相關代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>網易云音樂下載</title>
</head><style>* {padding: 0;margin: 0;list-style: none;text-decoration: none;}.box {width: 500px;height: 600px;margin: 50px auto;border: 1px solid red;background: #c9c9c9;}.box1 {border-bottom: 1px solid red;}.search {width: 360px;height: 40px;margin: 20px auto;text-align: center;line-height: 40px;}.search > input {float: left;height: 30px;margin-top: 3px;outline: none;opacity: 0.5;}.search > input:first-child {margin-left: 20px;margin-right: 10px;padding-left: 10px;width: 180px;}.search > input:nth-child(2) {width: 70px;margin-right: 10px;}#audio {margin-top: 60px;margin-left: 80px;outline: none;opacity: 0.5;}#ul {color: red;margin-top: 140px;text-align: center;}#ul > li {line-height: 25px;font-weight: 900;}</style><body>
<div class="box" id="box"><div class="box1"><div class="search"><input id="txt" type="text" title="search" placeholder="請輸入想要下載的歌曲ID"><input id="sub" type="submit" title="submit" value="搜素"></div></div><audio id="audio" controls></audio><ul id="ul"></ul>
</div><script type="text/javascript">let box = document.getElementById('box');let txt = document.getElementById('txt');let sub = document.getElementById('sub');let audio = document.getElementById('audio');let ul = document.getElementById('ul');let detail = ""; // 歌曲信息/* 點擊搜索歌曲 */sub.onclick = function () {audio.pause(); // 暫停播放音樂if (txt.value === '') {alert('歌曲ID不能為空');} else {getDetail();getSong();}};/* 獲取歌曲播放地址 */function getSong() {let xhr = new XMLHttpRequest();xhr.open('get', 'https://api.imjad.cn/cloudmusic/?type=song&id=' + txt.value);xhr.send();xhr.onreadystatechange = function () {if (xhr.status === 200 && xhr.readyState === 4) {let url = JSON.parse(xhr.response);if (url.data[0].url === '') {alert('搜索的歌曲ID不存在');} else {console.log(url.data[0].url);audio.setAttribute("src", url.data[0].url);playNum();}}}}/* 獲取歌曲信息(歌曲名稱,歌手,專輯名,專輯圖片等信息) */function getDetail() {detail = "";let xhr1 = new XMLHttpRequest();xhr1.open('get', 'https://api.imjad.cn/cloudmusic/?type=detail&id=' + txt.value);xhr1.send();xhr1.onreadystatechange = function () {if (xhr1.status === 200 && xhr1.readyState === 4) {let url1 = JSON.parse(xhr1.response);if (url1.privileges[0].chargeInfoList !== null) {detail += '<li>單曲: ' + url1.songs[0].name + '</li><li>第一歌手: ' + url1.songs[0].ar[0].name + '</li><li>所屬專輯: ' + url1.songs[0].al.name + '</li>';box.style.background = "url(" + url1.songs[0].al.picUrl + ")";box.style.backgroundSize = "100% 100%";ul.innerHTML = detail;}}}}/* 控制播放次數(修改time的值進行控制) */function playNum() {let start = 0;let times = 1;audio.addEventListener("stopSong", function () {audio.play();start++;if (start === times) {audio.pause();}});audio.play();}</script>
</body>
</html>
總結
以上是生活随笔為你收集整理的网易云歌曲下载的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
