html网页中加入音乐播放器,[HTML5]简单网页本地音乐播放器
既然HTML5提出与本地交互方便,就想写个HTML5的本地音乐播放器。一开始问题主要集中在怎么读取本地文件路径,我想肯定可以用JS实现去操作本地文件(因为node.js很容易实现读取本地文件,但是原生JS怎么写不太清楚),不过简单一点就用这样只能读取一个,我想做的是最好是把一个文件夹中的都取出来,然后参考http://sapphion.com/2011/11/html5-folder-upload-with-webkitdirectory/ 给file加了个webkitdirectory属性,谷歌浏览器下可以实现,发现目前为止只有谷歌浏览器支持文件夹获取,所以其他浏览器只能为file添加一个 multiple属性 ,可以一次添加多个文件,我参考了一下http://blog.csdn.net/goodnew/article/details/7355619,不过试了几个浏览器发现文章中为file添加的mozdirectorydirectory,并未发现有什么用,更坚信了只有谷歌才支持文件夹获取。后面主要问题就是获取文件的URL,播放器的话用,详细看代码,附上链接http://download.csdn.net/detail/popezong/8790939
#songlist {
border: 1px;
background-color: #c4c4c4;
}
.odd {
background-color: #ffffff;
}
.cur {
background-color: #444444;
}
ul {
list-style-type: none;
margin: 0px;
width: 400px;
}
ul li {
list-style-type: none;
display: block;
width: 100%;
background: #ccc;
}
ul li:hover {
background: #999;
}
您的浏览器不支持 audio 标签。
style="display: none" accept="audio/mpeg" />
var input = document.getElementById('files');
var songlist = document.getElementById('songlist');
var song = songlist.innerHTML;
var myAuto = document.getElementById('myaudio');
input.onchange = function(e) {
var files = e.target.files; // FileList
var count = 0;
for (var i = 0, f; f = files[i]; ++i) {
//file have .name
var path = f.name || f.webkitRelativePath ;
if (/.*\.mp3$/.test(path)) {
var url;
if (window.createObjectURL) {
url = window.createObjectURL(files[i])
} else if (window.createBlobURL) {
url = window.createBlobURL(files[i])
} else if (window.URL && window.URL.createObjectURL) {
url = window.URL.createObjectURL(files[i])
} else if (window.webkitURL
&& window.webkitURL.createObjectURL) {
url = window.webkitURL.createObjectURL(files[i])
}
if (count % 2 === 0) {
song += '
'
+ path + '
';
} else {
song += '
'
+ path + '
';
}
count++;
}
}
songlist.innerHTML = song;
}
function autoPlay() {
var next = $(".cur").next();
next.addClass("cur").siblings().removeClass("cur");
var cur = document.getElementsByClassName("cur");
myAuto.src = cur[0].firstChild.value;
myAuto.play();
}
function selectMP3() {
input.click();
}
function changeSrc(event) {
event = event ? event : window.event;
var obj = event.srcElement ? event.srcElement : event.target;
$(obj).addClass("cur").siblings().removeClass("cur");
myAuto.src = obj.firstChild.value;
myAuto.play();
}
PS:不是专业的前端可能写的代码很丑。。分析也不够透彻。。
html网页中加入音乐播放器,[HTML5]简单网页本地音乐播放器相关推荐
- 怎么把html的网页做成视频,html5网页中怎么加入视频?怎么为网页添加视频?
相信很多小伙伴会在各种网页和 app 中观看各种视频,那么今天我们就来说说怎么在html5网页中怎么加入视频?和怎么为网页添加视频吧! 1.首先,我们在开发工具中新建一个 .html 文件,输入下面代 ...
- C#制作简单的本地音乐播放器(二)—— 显示歌词
此篇文章主要补充 C#制作简单的本地音乐播放器(一) 中的"歌词显示"部分的内容. 页面设计部分 相关内容 本程序使用的歌词文件为lrc格式,lrc是英文lyric(歌词)的缩写, ...
- 一款简单的本地音乐播放器,界面美观、包括主题切换、歌单管理等等
MeetMusic 项目地址:lijunyandev/MeetMusic 简介:一款简单的本地音乐播放器,界面美观.包括主题切换.歌单管理等等 音乐-播放器-主题切换- App 效果图 ...
- [HTML5]简单网页本地音乐播放器
既然HTML5提出与本地交互方便,就想写个HTML5的本地音乐播放器.一开始问题主要集中在怎么读取本地文件路径,我想肯定可以用JS实现去操作本地文件(因为node.js很容易实现读取本地文件,但是原生 ...
- 用html做成的音频播放器,HTML5制作酷炫音频播放器插件图文教程
上图便是这个音频播放器的UI界面图,里面还隐藏了一个歌曲的播放列表.整个播放器的UI除了大背景的人像图和歌曲的星星评分使用了图片其他全部由CSS和font-face绘制而成,看上去有难度的地方就只有C ...
- [微信音频播放器] html5 audio 制作的微信播放器
weixinAudio.js 一个简单的微信样式播放器 播放器DOM及CSS是微信里内置的音频播放器的样式,重新创建了控制层js,方便在在公众号,APP等场景使用. 例子 demo 地址 github ...
- Android 简单的本地音乐播放器Demo
一个小小的本地音乐播放器,花了几个小时完成的,帮朋友做的毕业作业. 包含基本播放功能.进度条显示和拖拽.时间倒计.后台播放.一键刷新.收藏操作.单独播放收藏页的音乐.... 代码没有一定的模式和注释, ...
- python 播放本地音乐_实战项目—python实现本地音乐播放器
随着网络的发展,我们已经很少将音乐下载到本地,而是直接在线听歌,方便而又直接.也许你用的音乐播放器是这个 也许是这个 这都不是重点,今天我们要用python自己打造一款音乐播放器. 具体思路 使用py ...
- Android音乐播放器eclipse,简单的Android音乐播放器 eclipse开发的基于Android平台的音乐播放器 - 下载 - 搜珍网...
压缩包 : 音乐播放器.zip 列表 音乐播放器/ 音乐播放器/.classpath 音乐播放器/.project 音乐播放器/.settings/ 音乐播放器/.settings/org.eclip ...
- html语言音乐添加路径,HTML5简单实现添加背景音乐的几种方法
这里推荐两种方法,就是两个标签 或者 常用 +css布局 隐藏播放器 做网站比较实用! html5添加音乐 说明: 1.src毫无疑问写路径. 2.使用hidden="true"表 ...
最新文章
- P4887 【模板】莫队二次离线(第十四分块(前体))
- 定制CentOS 6.3 自动安装盘
- 数字图像处理实验(2):PROJECT 02-02, Reducing the Number of Gray Levels in an Image
- Actor-ES框架:消息发布器与消息存储器
- python羊车门问题_「羊车门」经典概率题中不换门选中车的概率是多少?
- jstl处理栏目与子栏目_Detelogy智能前处理设备微展厅P2:再添新品
- centos mysql 主从配置_centos7.4安装mysql8,并设置主从配置
- php友情链接代码,php友情链接
- qgc地面站如何导入离线地图_【技术贴第三期】如何玩转离线地图?
- LR算法(基础及核心概念)
- 09年最好看的电影大全_09年最经典的电影大全
- 《Evolutionary Computation for Expensive Optimization:A Survey》笔记
- 如何使用VSCode开发Qt项目?
- harbor高可用部署
- 认识计算机教案流程图,流程图教案信息技术.doc
- 企业邮箱登录地址,邮箱登录入口,邮箱登录须知
- matlab如何写不等于号,不等于号(不等于号可以往右写么)
- python urlencode函数 adb打开,Python urlencode和unquote函数使用实例解析
- RAID磁盘阵列故障
- 牛客小白月赛32--C消减整数、E春游(贪心)