首页 > 其他分享 >代码片段

代码片段

时间:2023-04-05 10:45:36浏览次数:24  
标签:node src 片段 document 代码 let audio display

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);
  
      })
  })
}

标签:node,src,片段,document,代码,let,audio,display
From: https://www.cnblogs.com/adenosine/p/17284730.html

相关文章

  • 评价代码质量的高低的标准(二)
    代码质量高低也是一个综合各种因素得到的结论。我们并不能通过单一的维度去评价一段代码写的好坏。比如,即使一段代码的可扩展性很好,但可读性很差,那我们也不能说这段代码质量高。除此之外,不同的评价维度也并不是完全独立的,有些是具有包含关系、重叠关系或者可以互相影响的。比如,代......
  • 【无人机协同】多无人机协同任务规划模型研究附matlab代码
    ✅作者简介:热爱科研的Matlab仿真开发者,修心和技术同步精进,matlab项目合作可私信。......
  • 写出高质量代码的好处(一)
    为什么要学习设计模式?1.应对面试中的设计模式相关问题在求职面试中,设计模式问题是被问得频率比较高的一类问题。特别是一些像BAT、TMD这样的大公司,比较重视候选人的基本功,经常会拿算法、设计模式之类的问题来考察候选人。平时重视设计模式相关知识的积累,只需要在每次面试前......
  • 代码能改变世界,资本不同情情怀,产品刚开始考虑商业化并不是坏事
    代码能改变世界,资本不同情情怀。这年头不提早布局如何利用产品赚钱,等真的撑不住了只能关门大吉了。这一点,csdn从一开始就做的很好,虽然我也一直骂csdn好多人全是抄袭搬运狗,博客质量低,但是人家广告,会员,付费专栏以及提供资源下载服务等收入,让写博客的人赚到钱,有激励写更多的东西,让平......
  • windows编程自己常用的代码记录
    首先新建makefileALL:mainfiles+=-mwindows-lcomctl32-ldwmapimain:$(cpp) g++$(cpp)$(files)-o$(exe)-static-Wall-std=c++11$(INCLUDE)$(LIB).PHONY:cleanallclean: del*.exe-rf形成的编译命令是:g++demo.cpp-mwindows-lcomctl32-ldwmapi-ode......
  • 前端项目代码阅读指南
    0.把项目运行起来,如果npm总是报错,并且项目年代久远,直接放弃,找一个能跑起来的看。1.看package.json,了解项目中用到了哪些依赖,这些依赖一般都是怎么使用的,项目结构大概什么样子2.看目录,猜一下每个目录下的文件都是干什么的3.看入口文件,一般是index.js,或者app.js,了解全局......
  • C#高清打印关键代码
    打印过程中,获取可见的实际宽度作为打印,就没有收缩的了,图片收缩放大是模糊的原因之一,所以所见所得就是最好的方法1privatevoidprintDocNew_PrintPage(objectsender,System.Drawing.Printing.PrintPageEventArgse)2{3Graphicsg=e.Gra......
  • ChatGPT淘汰程序员?不可能的!看代码生成机器人如何让我更强
    AIGC让程序员失业?不存在的!聆思开发聊天助手Chaty让你更高效地开发CSK芯片代码、更自在地摸鱼!当遇上十万火急,产品提完需求马上要怎么办?且看Chaty如何破局以往流程:Chaty加持:Chaty是什么是为聆思CSK芯片量身打造的开发助手系列,可根据开发者的需求进行代码生成、问题定位、辅助开发等......
  • c# .net 静态织入 代码生成 Source Generators
    必须创建netstandard项目【ClassLibrary1】来存放代码生成接口[Generator]publicclassDemoSourceGenerator:ISourceGenerator{publicvoidExecute(GeneratorExecutionContextcontext){//Findthemainmethodv......
  • python——异步编程代码实战
    摘要主要介绍python中相关的异步编程的原理和是代码的实战协程实现协程(Coroutine),也可以被称为微线程,是一种用户态内的上下文切换技术。简而言之,其实就是通过一个线程实现代码块相互切换执行。协程不是计算机提供,程序员人为创造。协程的优点:在一个线程中如果遇到IO等待时间,线程不......