HTML5实现MP3上传前的预览和播放时长的获取

nutchcake 2014-04-21 06:04:11 


<!DOCTYPE html>

<html>

<head>

    <!-- @author 夏茂轩@成都信息工程学院 QQ：1034297177 -->

    <meta charset="utf-8"/>

    <title></title>

    <script language="JavaScript" src="http://code.jquery.com/jquery-1.11.0.js"></script>

    <script>

        $(function () {

            $("#test").change(function () {

                var objUrl = getObjectURL(this.files[0]);

                $("#audio").attr("src", objUrl);

                $("#audio")[0].play();

                $("#audio").show();

                getTime();

            });

        });

        <!--获取mp3文件的时间 兼容浏览器-->

        function getTime() {

            setTimeout(function () {

                var duration = $("#audio")[0].duration;

                if(isNaN(duration)){

                    getTime();

                }

                else{

                    console.info("该歌曲的总时间为："+$("#audio")[0].duration+"秒")

                }

            }, 10);

        }

        <!--把文件转换成可读URL-->

        function getObjectURL(file) {

            var url = null;

            if (window.createObjectURL != undefined) { // basic

                url = window.createObjectURL(file);

            } else if (window.URL != undefined) { // mozilla(firefox)

                url = window.URL.createObjectURL(file);

            } else if (window.webkitURL != undefined) { // webkit or chrome

                url = window.webkitURL.createObjectURL(file);

            }

            return url;

        }

    </script>

</head>

<body>

<input id="test" type="file" multiple="multiple"/>

<audio id="audio" controls="" style="display: none;"></audio>

</body>

</html>
...全文
3461 5 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
yujieyu7 2016-04-20
  • 打赏
  • 举报
 回复
引用 楼主 nutchcake 的回复:

<!DOCTYPE html>
<html>
<head>
    <!-- @author 夏茂轩@成都信息工程学院 QQ：1034297177 -->
    <meta charset="utf-8"/>
    <title></title>
    <script language="JavaScript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
    <script>
        $(function () {
            $("#test").change(function () {
                var objUrl = getObjectURL(this.files[0]);
                $("#audio").attr("src", objUrl);
                $("#audio")[0].play();
                $("#audio").show();
                getTime();
            });
        });
        <!--获取mp3文件的时间 兼容浏览器-->
        function getTime() {
            setTimeout(function () {
                var duration = $("#audio")[0].duration;
                if(isNaN(duration)){
                    getTime();
                }
                else{
                    console.info("该歌曲的总时间为："+$("#audio")[0].duration+"秒")
                }
            }, 10);
        }
        <!--把文件转换成可读URL-->
        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }
    </script>
</head>
<body>
<input id="test" type="file" multiple="multiple"/>
<audio id="audio" controls="" style="display: none;"></audio>
</body>
</html>
牛逼！！！
u018875539 2014-08-22
  • 打赏
  • 举报
 回复
引用 1 楼 xzy21com 的回复:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>html5预览mp3</title>
    <script>
    //jq不是做这种小事的
    window.onload=function(){
        var audio=document.getElementById("audio");
        document.getElementById("test").onchange=function(e){
            var file=e.target.files[0],src=window.createObjectURL&&window.createObjectURL(file)||window.URL&&window.URL.createObjectURL(file)||window.webkitURL && window.webkitURL.createObjectURL(file);
            if(/^audio/i.test(file.type)){
                audio.style.display='block';
                audio.src=src;
                audio.play();
                function g(){isNaN(audio.duration) ? requestAnimationFrame(g):console.info("该歌曲的总时间为："+audio.duration+"秒")}
                requestAnimationFrame(g);
            }else{
                audio.pause();
                audio.style.display='none';
                alert("请选择音乐文件！");
            }
        }
    }
    </script>
</head>
<body>
<input id="test" type="file" multiple="multiple"/>
<audio id="audio" controls="" style="display: none;"></audio>
</body>
</html>
谢谢分享
nutchcake 2014-04-22
  • 打赏
  • 举报
 回复
太屌，昨天搞了我好久。。你为何这么叼
scscms太阳光 2014-04-22
  • 打赏
  • 举报
 回复 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>html5预览mp3</title>
    <script>
    //jq不是做这种小事的
    window.onload=function(){
        var audio=document.getElementById("audio");
        document.getElementById("test").onchange=function(e){
            var file=e.target.files[0],src=window.createObjectURL&&window.createObjectURL(file)||window.URL&&window.URL.createObjectURL(file)||window.webkitURL && window.webkitURL.createObjectURL(file);
            if(/^audio/i.test(file.type)){
                audio.style.display='block';
                audio.src=src;
                audio.play();
                function g(){isNaN(audio.duration) ? requestAnimationFrame(g):console.info("该歌曲的总时间为："+audio.duration+"秒")}
                requestAnimationFrame(g);
            }else{
                audio.pause();
                audio.style.display='none';
                alert("请选择音乐文件！");
            }
        }
    }
    </script>
</head>
<body>
<input id="test" type="file" multiple="multiple"/>
<audio id="audio" controls="" style="display: none;"></audio>
</body>
</html>
nutchcake 2014-04-22
  • 打赏
  • 举报
 回复 1
引用 1 楼 xzy21com 的回复:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>html5预览mp3</title>
    <script>
    //jq不是做这种小事的
    window.onload=function(){
        var audio=document.getElementById("audio");
        document.getElementById("test").onchange=function(e){
            var file=e.target.files[0],src=window.createObjectURL&&window.createObjectURL(file)||window.URL&&window.URL.createObjectURL(file)||window.webkitURL && window.webkitURL.createObjectURL(file);
            if(/^audio/i.test(file.type)){
                audio.style.display='block';
                audio.src=src;
                audio.play();
                function g(){isNaN(audio.duration) ? requestAnimationFrame(g):console.info("该歌曲的总时间为："+audio.duration+"秒")}
                requestAnimationFrame(g);
            }else{
                audio.pause();
                audio.style.display='none';
                alert("请选择音乐文件！");
            }
        }
    }
    </script>
</head>
<body>
<input id="test" type="file" multiple="multiple"/>
<audio id="audio" controls="" style="display: none;"></audio>
</body>
</html>
厉害！
网络拓扑可视化工具_节点布局算法_图形界面交互_实时数据渲染_动态拓扑更新_多层级网络结构展示_自定义节点样式_连线动画效果_拓扑数据导入导出_网络性能监控_设备状态可视化_路径分.zip
网络拓扑可视化工具_节点布局算法_图形界面交互_实时数据渲染_动态拓扑更新_多层级网络结构展示_自定义节点样式_连线动画效果_拓扑数据导入导出_网络性能监控_设备状态可视化_路径分.zip
【医疗信息化】基于C++的儿童疫苗接种与体检管理系统设计：基于 C++的疫苗接种和儿童体检系统设计与实现的详细项目实例（含完整的程序，数据库和GUI设计，代码详解）
内容概要：本文详细介绍了一个基于C++语言开发的疫苗接种和儿童体检系统的设计与实现全过程，涵盖项目背景、目标意义、架构设计、核心功能模块、数据库实现、API接口规范、前后端代码实现及部署应用等多个方面。系统采用分层架构与模块化设计，实现了儿童信息管理、疫苗接种记录、体检数据录入、多用户权限控制、数据统计分析、异常预警、安全加密与日志审计等核心功能，并通过MySQL数据库进行数据持久化，结合Qt实现图形化界面，支持高并发、数据脱敏、多平台对接与自动化部署。项目强调数据安全、隐私保护与系统可扩展性，适用于社区医疗、疾控中心、学校及医院等场景。; 适合人群：具备C++编程基础，熟悉数据库操作和基本软件工程流程的开发人员、计算机及相关专业学生、医疗信息化项目开发者，以及希望了解完整医疗管理系统开发流程的技术人员。; 使用场景及目标：①学习如何使用C++构建完整的医疗信息管理系统；②掌握数据库设计、前后端交互、权限控制、多线程处理和GUI开发等关键技术；③应用于社区卫生服务、学校健康管理、疾控数据统计等实际业务场景，提升儿童健康管理水平；④作为课程设计、毕业设计或实际项目的参考模板。; 阅读建议：建议读者结合文档中的代码示例与数据库脚本，搭建本地开发环境进行实践操作，重点关注系统架构设计、模块解耦、安全机制与前后端交互逻辑，深入理解各功能模块的实现原理，并尝试在此基础上进行功能扩展，如接入移动端或增加AI分析模块。
使用 Zabbix 搭建企业级监控平台实操.doc
使用 Zabbix 搭建企业级监控平台实操.doc
技术评审方法论与流程优化实践案例库_技术评审流程优化风险识别与预防高性能系统设计高可用架构可伸缩性与扩展性方案安全性保障互联网项目非功能质量提升12306查询服务l.zip
技术评审方法论与流程优化实践案例库_技术评审流程优化风险识别与预防高性能系统设计高可用架构可伸缩性与扩展性方案安全性保障互联网项目非功能质量提升12306查询服务l.zip
使用 Java 注解处理器提升开发效率实践.doc
使用 Java 注解处理器提升开发效率实践.doc
JavaScript

87,992

社区成员

224,698

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章