html网页中加入音乐播放器,[HTML5]简单网页本地音乐播放器[通俗易懂]

html网页中加入音乐播放器,[HTML5]简单网页本地音乐播放器[通俗易懂]既然HTML5提出与本地交互方便,就想写个HTML5的本地音乐播放器。一开始问题主要集中在怎么读取本地文件路径,我想肯定可以用JS实现去操作本地文件(因为node.js很容易实现读取本地文件,但是原生JS怎么写不太清楚),不过简单一点就用这样只能读取一个,我想做的是最好是把一个文件夹中的都取出来,然后参考http://sapphion.com/2011/11/html5-folder-upload…

大家好,又见面了,我是你们的朋友全栈君。

既然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:不是专业的前端可能写的代码很丑。。分析也不够透彻。。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/151626.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • QUIC简单介绍

    QUIC简单介绍

  • 说说 SpringMVC 工作原理

    说说 SpringMVC 工作原理说说SpringMVC工作原理1、SpringMVC流程2、组件说明3、MVC模式4、SpringMVC是什么先看一张SpringMVC的工作原理图:1、SpringMVC流程1、用户发送请求至前端控制器DispatcherServlet。2、DispatcherServlet收到请求调用HandlerMapping处理器映射器。3、处理器映射器找到具体的处理器(可以根据xml配置、注解进行查找),生成处理器对象及处理器拦截器(如果有则生成)一并返回给DispatcherServ

  • ov7725摄像头人脸识别_ov7725摄像头

    ov7725摄像头人脸识别_ov7725摄像头OV7725摄像头软件实现简单的二值化处理项目使用的摄像头型号:​ 正点原子OV7725摄像头模块,带FIFO的摄像头模块。图像二值化化的个人见解:​ 常见的图片格式:​ 黑白图片、灰度图片、彩色图片。不同的图片的格式类型主要的不同点在每个像素点需要几位的二位数来表示。黑白图片每个像素不是0就是1,0代表黑颜色,1代表白颜色。灰度图像每个像素需要一个字节表示(8位二进制)每个像素可以量化…

  • Linux使用快捷键,who命令,rm命令,ps命令,cd,命令kill命令,find命令,grep命令,tar命令(gz、tar、bz2),用户管理,vim配置的一部分,相关命令

    Linux使用快捷键,who命令,rm命令,ps命令,cd,命令kill命令,find命令,grep命令,tar命令(gz、tar、bz2),用户管理,vim配置的一部分,相关命令

    2021年12月31日
  • pycharm如何编译程序_xc8编译器

    pycharm如何编译程序_xc8编译器现在轮到PyCharmPyCharm安装教程PyCharm是一款功能强大的Python编辑器,具有跨平台性,鉴于目前最新版PyCharm使用教程较少,为了节约时间,来介绍一下PyCharm在Windows下是如何安装的。第一步:进入PyCharm官网这是PyCharm的下载地址:http://www.jetbrains.com/pycharm/download/#section=windows进入该网站后,我们会看到如下界面:professional表示专业版,co

  • 知乎收藏数最高的1000个回答

    掃描了知乎兩千五百萬篇答案,統計出了“收藏數”最高的1000篇:同系列一:知乎收藏数最高的1000个回答-陈鹏举的文章-知乎专栏同系列二:知乎关注人数最高的1000个问题-陈鹏举的文章-知乎专栏同系列三:知乎关注人数最高的1000个收藏夾-陈鹏举的文章-知乎专栏同系列四:知乎关注人数最高的1000个專欄-陈鹏举的文章-知乎专栏哪些知识技能一定

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号