1.js新增播放当前页面audio的播放按钮 下载全部的按钮
歌曲名设置为 data-desc=a.mp3
原始audio 下一首 下载所有 歌曲名
点击查看代码
let musics = document.querySelectorAll('audio')
// 音频链接
let musicSrcs=[]
let musicSrcNode={}
for (let i=0;i<musics.length;i++){
musicSrcs[i]=musics[i].src
musicSrcNode[musics[i].src]=musics[i]
}
// 添加音乐播放器
if (musics.length>0){
let container=document.createElement('div')
let display_audio=document.createElement('audio')
display_audio.src=musics[0].src
display_audio.setAttribute('controls',true)
let playNext=document.createElement('button')
playNext.textContent='下一首'
let downAll=document.createElement('button')
downAll.textContent='下载所有'
let tipNow=document.createElement('span')
tipNow.textContent='正在播放 '+musics[0].dataset.desc
container.appendChild(display_audio)
container.appendChild(playNext)
container.appendChild(downAll)
container.appendChild(tipNow)
let insertObj=document.querySelector('.post-tabs')
insertObj.insertBefore(container,insertObj.children[0])
// row.insertBefore(audio,row.children[0])
function PlayAudio(node){
display_audio.src=node.src
tipNow.textContent=node.dataset.desc
display_audio.play()
}
// 点击项目播放
musics.forEach((node) => {
$(node.parentNode).click(()=>{
PlayAudio(node)
})
})
// 播放下一首
playNext.addEventListener('click',(e)=>{
let index=musicSrcs.indexOf(display_audio.src)
index=index+1
if (index===musicSrcs.length)
index=0
PlayAudio(musicSrcNode[musicSrcs[index]])
})
// 下载所有
$(downAll).click(()=>{
musics.forEach((node) => {
var name = node.dataset.desc
var src = window.location.origin + node.getAttribute('src')
downloadfile(src, name)
// this.downloadMp3('/api/musics?music_id=1',name);
})
})
}