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>
...全文
3443 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>
厉害！
js获取 input file 图片立即显示
js获取input file控件选择的图片 并且立即在img标签显示出来
HTML5图片压缩上传与预览功能实现
本文还有配套的精品资源，点击获取 简介：HTML5技术允许开发者实现更丰富的图像处理功能，如上传前的图片压缩和预览。本文将探讨如何利用FileReader API、Canvas元素、Image对象和相关技术实现图片压缩上传预览功能。这些技术包括Base64编码处理、Canvas画布操作、质量控制参数设置，以及通过事件监听进行异步处理和兼容性考虑。实现该功能不仅有助于节省服务...
Vue2 - 实现上传本地视频到后端服务器及在线预览播放视频+移除视频+进度条上传，vue上传单个或多个视频文件及大文件，将已选视频上传服务端并可预览视频和删除功能（支持Element、Antd组件）
vue2，VUE使用Element上传视频及预览，上传视频和删除视频功能，实现视频文件上传视频回显，VUE+element上传视频，vue2上传视频并预览、上传多个视频，vue实现上传视频功能+预览，上传显示视频功能，移动端h5网页视频上传并预览效果，vue上传视频预览移除，vue2批量上传视频，vue2上传视频到后端，视频上传与实时预览功能，upload上传组件，视频流上传播放功能，视频播放器，批量上传多个视频，如何选择本地视频上传至网页，vue elementUI视频预览上传组件，vue上传超大视频文件
前端H5实现多图片上传并预览
利用input 的type='file&quot; 可以实现文件的上传，不过只支持单个文件上传。只有给input加上multiple属性才能实现多个文件同时上传。 好了，下面我们来实现一个简单的多图片上传并预览的例子 &amp;lt;div class=&quot;input-file-box&quot;&amp;gt; &amp;lt;span&amp;gt;点击上传图片&amp;lt;/span&amp;gt; &a
.NET实现图片上传前预览功能
本文还有配套的精品资源，点击获取 简介：在.NET开发中，实现图片上传和预览功能是一个常见需求，特别是在网页应用开发中。通过提供的压缩包资源，开发者能够掌握如何在.NET环境中实现上传前的图片预览功能。核心文件 ImagePreview.ashx 负责处理HTTP请求并生成图片的缩略图或临时文件，而后端代码则需要处理文件并返回预览URL。前端由 Ima...
JavaScript

87,993

社区成员

224,703

社区内容

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

加载中

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

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

+ 用AI写文章