html怎么添加本地音乐(html5音乐播放制作方法)

html5之audio音频添加本地音乐

运用的技术点:
1、音乐播放器:audio
2、加载本地音乐:file
3、加载音乐名:[]数组、split分割
4、音乐地址:blob
5、事件:file的change事件,li的单击事件
6、li选中背景显示
源码如下:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>音频播放</title><style>.currentli {color:#186ecc;background-color:orange;}#dividLine{border: 1px solid greenyellow;border-radius: 10px;width: 300px;}</style><script src="js/jquery.min.js"></script><script>$(document).ready(function () {var urls=[];//装播放地址的数组var ss=[];//装音乐名的数组//选择文件的事件$("#file").change(function (file) {for (var i=0;i<file.target.files.length;i++){var filename=file.target.files[i].name;//获取到文件名var names=filename.split(".");//根据.进行分割var ol=names[0];//取到.之前的名称var li = $("<li>");li.html(ol);//设置li表现显示的文本$("#playlist").append(li);//将创建的li标签添加到ol里面$("body").append(file.target.files[i]);var url = window.URL.createObjectURL(file.target.files[i]);ss[i]=ol;urls[i]=url;$("#player")[0].src = urls[0];$("#player")[0].Onload= function () {window.URL.revokeObjectURL(src);};}//播放列表的单击事件$("#playlist").on("click","li",function () {//选中li显示背景色和字体颜色$(this).addClass("currentli").siblings().removeClass();var name= $(this).text();//获取到选中列表的文本for (var i=0;i<ss.length;i++)//循环遍历添加到数组中的歌曲名称{if(ss[i]==name)//获取到下标地址{$("#player")[0].src = urls[i];$("#player")[0].Onload= function () {window.URL.revokeObjectURL(src);};}}});});});</script></head><body><audio src="mp3/公子向北走.m4a" cOntrols="controls" autoplay="autoplay" id="player"></audio><label for="file">+</label><input type="file" multiple id="file" style="display: none"><div id="dividLine"><ol id="playlist"></ol></div></body></html>

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:dandanxi6@qq.com

(0)
上一篇 2023年 6月 10日 上午10:28
下一篇 2023年 6月 10日 上午10:37

相关推荐

  • 注册今日头条怎么赚钱

    大部分的读者,只会阅读和观看今日头条,觉得好玩,能学到很多知识。但如果自己注册账号,会发现几个简单的步骤就能注册成功,每天发文章,看到收益。 (2)跳转到注册页面后,点击“注册”按…

    2023年 6月 6日
  • 开年14部爆款佳片必看(口碑炸裂的国产佳片最新)

    今年春节, 不少人选择原地过年。 好在新年伊始就佳片不断, 宅家观影追剧也是个不错的选择。 经历了近一年的沉寂, 电影院迎来了一个热闹的春节档, 还有国产新剧和海外好片, 陪伴各位…

    2023年 9月 1日
  • 手机信号满格却上不了网什么情况

    最怕空气突然安静,最怕手机突然没网。 大家都知道手机显示信号弱时会影响正常的通信使用,会出现通话不顺畅、上网卡顿等现象。但是当手机信号满格时还上不了网,这是为什么呢? 原因一:基站…

    2022年 12月 31日
  • 二维码怎样生成链接,图片生成二维码链接最简单的方法

    二维码怎么生成链接?二维码是一种常见的编码方式,它可以将文本、网址、电话号码等信息编码成一张二维码图像。当用户使用手机或平板电脑扫描二维码时,可以快速访问编码的信息。在这篇文章中,…

    2023年 4月 1日
  • 支付宝搜索是什么梗

    近段时间经常刷朋友圈的小伙伴们是不是经常看见支付宝在吗这个文案,看起来有的很暧昧,有的很煽情,反正就是内心很懂你们。但是也有的小伙伴称支付宝搜索在吗没有反应,这是为什么呢?下面就和…

    2023年 3月 13日
  • 扫码免费送礼物什么套路(扫码免费领礼物骗局)

    天底下还有这样的好事? 不用自己花一分钱 帮忙转发兼职广告 或者扫一扫微信二维码 就能免费领取精美礼物? 也许你会思索疑虑,但现实中还真有不少人通过扫二维码转发兼职广告到微信群免费…

    2023年 5月 27日
  • word列印边距(word顶边距3.5怎么设置)

    Word涨薪88式第十五式:页边距调整 页边距,形象的来讲,就是正文距离纸张边缘的距离。西方图片中蓝色线条就可以称之为页边,从蓝色线条到页面边距的距离叫页边距,中间部分是正文内容的…

    2023年 2月 5日
  • python爬虫之腾讯vip(腾讯python爬虫项目实战)

    运行环境 IDE:pycharm python:3.6.5 实现目的 实现对腾讯视频目标url的解析与下载,由于第三方vip解析,只提供在线观看,隐藏想实现对目标视频的下载 实现思…

    2023年 3月 23日
  • 少年派里的邓小琪真名叫什么(少年派邓小琪头像大全)

    《少年派》是一部都市家庭剧,主要围绕着四个家庭,讲述了家庭成员迎着阳光风雨努力奋斗,最终收获成长的故事。也同时反映了真实的家庭教育问题。 邓小琪在剧中是天蝎座女孩,瘦瘦高高的女孩子…

    2023年 5月 6日
  • 赛事评分,评委打分用哪种线上评分软件好

      “评委打分软件“是一种现场评委打分的解决方案。一般适用于“创投路演/创业大赛/演讲比赛/歌唱比赛/技能大赛/文艺大赛/演讲大赛/才艺大赛/歌咏大赛/模特大赛/艺术大赛 等”需要…

    2023年 7月 19日