代码片段

发布时间 2023-04-05 10:43:50作者: caiusxin

1.js新增播放当前页面audio的播放按钮 下载全部的按钮
歌曲名设置为 data-desc=a.mp3
原始audio 下一首 下载所有 歌曲名
image

点击查看代码
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);
  
      })
  })
}