文档章节

audio简单demo2

-波仔-
 -波仔-
发布于 2016/06/23 19:06
字数 1079
阅读 18
收藏 0
点赞 0
评论 0

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>
    <link rel="shortcut icon" href="img/icon.png">
    <title>html5 audio音频播放</title>
    <script src="lib/jquery2.1.js" type="text/javascript"></script>
    <style>
        *{ margin: 0; padding:0;}
        body{-webkit-tap-highlight-color: rgba(0,0,0,0); font-family: "微软雅黑"}
        h1{ width: 100%; font-size: 1.5em; text-align: center; line-height: 3em; color:#47c9af; }
        #audio{ width: 100%;}
        #control{ width: 150px; height: 150px; line-height: 150px; text-align: center; border-radius: 200px; border:none; color:#fff; margin-top: -75px; margin-left:-75px; left:50%; top:50%; position: absolute; box-shadow: #888 0 0 8px;}
        .color_gray{ background: #e4e4e4}
        .hide{ display: none;}
        .show{ display: block;}
        .play{ background:  #f06060;}
        .pause{ background:skyblue}
        /*进度条样式*/
        .progressBar{ width: 100%; height: 10px;margin: 30px auto 30px auto; position:absolute; left: 0; bottom: 35px;}
        .progressBar div{ position: absolute;}
        .progressBar .progressBac{ width: 100%; height: 10px;  left: 0; top:0; background: #e4e4e4;}
        .progressBar .speed{width: 100%; height: 10px; left: -100%; background: #f06060; }
        .progressBar .drag{ width: 30px; height: 30px; left: 0; top:-10px;  background: skyblue; opacity: 0.8; border-radius: 50px; box-shadow: #fff 0 0 5px;}
        /*时间样式*/
        #time{ width: 100%; height: 20px;position: absolute; left: 0; bottom:30px; color:#888;}
        .tiemDetail{ position: absolute; right:10px; top:0;}
        #songInfo{overflow: hidden; width: 200px; height:50px; line-height: 50px; text-align: center; color:#34495e;   margin-top: -25px; margin-left:-100px; left:50%; top:70%; position: absolute;}
        .shareImg{ position: absolute; left: 100000px;}


    </style>
</head>

<body>
<script>

    var drag;
    var speed;
    var audio;
    $(function() {
        getSong();
    })

    //获取歌曲链接并插入dom中
    function getSong() {
        audio = document.getElementById("audio");
        audio.src = "2.wav";
        audio.loop = true; //歌曲循环
        playCotrol(); //播放控制函数

    }

    //点击播放/暂停
    function clicks() {
        var audio = document.getElementById("audio");
        $("#control").click(function() {
            if ($("#control").hasClass("play")) {
                $("#control").addClass("pause").removeClass("play");
                audio.play();//开始播放
                dragMove();//并且滚动条开始滑动
                $("#control").html("暂停播放");
            } else {
                $("#control").addClass("play").removeClass("pause");
                $("#control").html("点击播放");
                audio.pause();
            }
        })
    }

    //播放时间
    function timeChange(time, timePlace) {//默认获取的时间是时间戳改成我们常见的时间格式
        var timePlace = document.getElementById(timePlace);
        //分钟
        var minute = time / 60;
        var minutes = parseInt(minute);
        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        //秒
        var second = time % 60;
        seconds = parseInt(second);
        if (seconds < 10) {
            seconds = "0" + seconds;
        }
        var allTime = "" + minutes + "" + ":" + "" + seconds + ""
        timePlace.innerHTML = allTime;
    }

    //播放事件监听
    function playCotrol() {
        audio.addEventListener("loadeddata", //歌曲一经完整的加载完毕( 也可以写成上面提到的那些事件类型)
                function() {
                    $("#control").addClass("play").removeClass("color_gray");
                    $("#control").html("点击播放");
                    addListenTouch(); //歌曲加载之后才可以拖动进度条
                    var allTime = audio.duration;
                    timeChange(allTime, "allTime");
                    clicks();
                }, false);

        audio.addEventListener("pause",
                function() { //监听暂停
                    $("#control").addClass("play").removeClass("pause");
                    $("#control").html("点击播放");
                    if (audio.currentTime == audio.duration) {
                        audio.pause();
                        audio.currentTime = 0;
                    }
                }, false);
        audio.addEventListener("play",
                function() { //监听暂停
                    $("#control").addClass("pause").removeClass("play");
                    $("#control").html("暂停播放");
                    dragMove();
                }, false);
        audio.addEventListener("ended", function() {
            alert(0)
        }, false)

        audio.addEventListener('timeupdate',function(){
            var currentTime = audio.currentTime;
            $("#time .currentTime").html(timeChange(currentTime, "currentTime"));

            if (audio.duration) {
                var progressValue = audio.currentTime/audio.duration; //用时间比来获取进度条的值
                if(progressValue == 1){
                    progressValue=0;//当播放完成,进度条跳到开始
                }
                drawCircle(canvas,progressValue);

            }

        },false);
    }

    //进度条
    //    这里我用的是事件实现进度拖动 如果不太熟悉touch的可以看下我之前写的一个小demo http://www.cnblogs.com/leinov/p/3701951.html
    var startX, x, aboveX = 0; //触摸时的坐标 //滑动的距离  //设一个全局变量记录上一次内部块滑动的位置

    //1拖动监听touch事件
    function addListenTouch() {
        document.getElementById("drag").addEventListener("touchstart", touchStart, false);
        document.getElementById("drag").addEventListener("touchmove", touchMove, false);
        document.getElementById("drag").addEventListener("touchend", touchEnd, false);
        drag = document.getElementById("drag");
        speed = document.getElementById("speed");
    }

    //touchstart,touchmove,touchend事件函数
    function touchStart(e) {
        e.preventDefault();
        var touch = e.touches[0];
        startX = touch.pageX;
    }
    function touchMove(e) { //滑动
        e.preventDefault();
        var touch = e.touches[0];
        x = touch.pageX - startX; //滑动的距离
        //drag.style.webkitTransform = 'translate(' + 0+ 'px, ' + y + 'px)';  //也可以用css3的方式
        drag.style.left = aboveX + x + "px"; //
        speed.style.left = -((window.innerWidth) - (aboveX + x)) + "px";
    }
    function touchEnd(e) { //手指离开屏幕
        e.preventDefault();
        aboveX = parseInt(drag.style.left);
        var touch = e.touches[0];
        var dragPaddingLeft = drag.style.left;
        var change = dragPaddingLeft.replace("px", "");
        numDragpaddingLeft = parseInt(change);
        var currentTime = (numDragpaddingLeft / (window.innerWidth - 30)) * audio.duration;//30是拖动圆圈的长度,减掉是为了让歌曲结束的时候不会跑到window以外
        audio.currentTime = currentTime;
    }
    //3拖动的滑动条前进
    function dragMove() {
        setInterval(function() {
            drag.style.left = (audio.currentTime / audio.duration) * (window.innerWidth - 30) + "px";
            speed.style.left = -((window.innerWidth) - (audio.currentTime / audio.duration) * (window.innerWidth - 30)) + "px";
        }, 500);
    }

    //圆形进度条

    function drawCircle(canvas, percentage) {
        var clientWidth = document.documentElement.clientWidth;
        var canvasWidth = Math.floor(clientWidth * 200 / 750);
        var innerR = canvasWidth * 0.8 * 0.5;//半径
        var ctx;
        canvas.setAttribute('width', canvasWidth + 'px');
        canvas.setAttribute('height', canvasWidth + 'px');
        if (canvas.getContext) {
            ctx = canvas.getContext('2d');
        }
        ctx.translate(canvasWidth / 2, canvasWidth / 2);
        ctx.beginPath();
        ctx.arc(0, 0, innerR, 0, Math.PI * 2, false);
        ctx.lineWidth = 10;
        ctx.strokeStyle = "#F0F0F0";
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(0, 0, innerR, Math.PI * 3 / 2, (Math.PI * 3 / 2 + Math.PI * 2 / 180 + percentage * Math.PI * 2), false);
        ctx.lineWidth = 10;
        ctx.strokeStyle = "#EEBD44";
        ctx.stroke();
    }

    drawCircle(document.getElementById('canvas'),20);


</script>

<h1>html5 audio 音频播放demo</h1>

<!--audiostart-->
<audio id="audio" src=""  loop="loop" ></audio>
<!--audio End-->

<!--播放控制按钮start-->
<button id="control" class="">loading</button>
<!--播放控制按钮end-->

<!--时间进度条块儿start-->
<section class="progressBar">
    <div class="progressBac"></div>
    <div class="speed" id="speed"></div>
    <div class="drag" id="drag"></div>
</section>
<!--时间进度条块儿end-->

<!--播放时间start-->
<div id="time"><div class="tiemDetail"><span class="currentTime" id="currentTime">00:00</span>/<span class="allTime" id="allTime">00:00</span></div></div>
<!--播放时间end-->
<!--歌曲信息start-->
<div id="songInfo">没时间-Leinov
    <div class="shareImg">
        <!--<img src="img/html5audio.jpg" alt="">-->
    </div>
</div>


<canvas id="canvas"></canvas>


</body>
</html>

© 著作权归作者所有

共有 人打赏支持
-波仔-
粉丝 5
博文 54
码字总数 48482
作品 0
杭州
程序员
简单的MVC框架--jdmvc

java simple mvc support restful and annotation ,some kind of params will be post in method. 具体例子请查看DEMO。非常简单的MVC。spring mvc精简版。 /** * demo 不带参数 * Title: *......

liubingsmile ⋅ 2014/04/27 ⋅ 0

Android自定义action与permission

大家好,今天给大家简单分享一下Android中自定义action与permission. 我们在实际开发中,经常会用到系统的功能,比如打电话功能只要如以下简单代码: Uri uri = Uri.parse("tel.xxxxxx");Inten...

无鸯 ⋅ 2011/09/13 ⋅ 0

Android自定义action与permission!!!

大家好,今天给大家简单分享一下Android中自定义action与permission. 我们在实际开发中,经常会用到系统的功能,比如打电话功能只要如以下简单代码: Uri uri = Uri.parse("tel.xxxxxx");Inten...

鉴客 ⋅ 2011/09/18 ⋅ 0

jdmvc-1.1 发布,简单的 MVC 框架

jdmvc-1.1 经过升级以后,性能测试接近原生的servlet。性能超越spring mvc. 1:支持java 注解 annotation 2:支持各种路由,跟伪静态模板天然集成 3:具有MVC所有的扩展 4:扩展性强,性能优越...

liubingsmile ⋅ 2014/05/02 ⋅ 21

JavaScript TTS 文本发音

在w3c草案中增加了对Web Speech Api的支持;主要作用在 两个非常重要的方面: 语音识别 (将所说的转换成文本文字 / speech to text);语音合成 (将文本文字读出来 / text to speech);而chrome在...

张悟空 ⋅ 2016/08/24 ⋅ 0

Docker和Nginx实现一个简单的负载均衡

当前使用centos7系统 1、安装nginx 参考http://blog.whsir.com/post-2078.html 2、docker拉取nginx镜像 docker pull nginx 3、创建两个目录 mkdir -p /data/demo1 mkdir -p /data/demo2 分别......

麦老师 ⋅ 2017/12/25 ⋅ 0

gitlab 可以push和clone,可是网页上无法显示

采用centos6.5,按照网上的教程搭建gitlab。登陆gitlab网站后创建项目,进入下图 按照上述过程push,显示/home/git/root/demo2.git is not repository.然后在网上查询资料得到下面方法 先在 ...

菜鸟上road ⋅ 2015/12/21 ⋅ 2

PHP变量作用域的问题,关于global的

有这样一段代码,非常简单,但是有关于函数变量作作用域的一个问题:

徐建兴 ⋅ 2014/04/01 ⋅ 5

切图触景微场景 js 发布 1.2 版本

切图触景(QietuSwiper)1.2发布,新增了包括渐入渐出、弹性渐入渐出、滚入、滚出、旋转、放大、缩小等绚丽的css3动画效果。增加了开发模式QietuSwiperDevModel,可以更方面排版,优化了部分...

qietuwang ⋅ 2015/07/23 ⋅ 11

js文字列表无缝向上滚动时出现滚动速度越来越快导致浏览器崩溃

如题,向上滚动时一开始速度正常大概过了两分钟左右出现滚动速度越来越快导致浏览器崩溃,麻烦大神们帮我看下那你出错了谢谢。 以下是相关代码: function scroll(){ var demo = document.g...

开心啾啾 ⋅ 2016/01/20 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

来自一个优秀Java工程师的简历

写在前面: 鉴于前几天的一份前端简历,虽然带着很多不看好的声音,但却帮助了很多正在求职路上的人,不管评论怎么说,我还是决定要贴出一份后端的简历。 XXX ID:357912485 目前正在找工作 ...

颖伙虫 ⋅ 13分钟前 ⋅ 0

Confluence 6 恢复一个站点有关使用站点导出为备份的说明

推荐使用生产备份策略。我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 home 目录)。XML 导出备...

honeymose ⋅ 今天 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 今天 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

Linux系统日志

linux 系统日志 /var/log/messages /etc/logrotate.conf 日志切割配置文件 https://my.oschina.net/u/2000675/blog/908189 logrotate 使用详解 dmesg 命令 /var/log/dmesg 日志 last命令,调......

Linux学习笔记 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部