h5活动需要插入音频，但又需要自定义样式，于是自己写咯

html

 <!-- cur表示当前时间 max表示总时长 input表示进度条 -->

 <span class='cur'></span><input type="range" min=0 max=100 class='range' value=0><span class='max'></span>

css

/* 进度条 */

.range {

    width: 5.875rem;

    height: 0.15rem;

    background: #2386e4;

    border-radius: 0.25rem;

    -webkit-appearance: none !important;

    position: absolute;

    top: 3.55rem;

    left: 6rem;

}

/* 进度滑块 */

.range::-webkit-slider-thumb {

    width: 0.5rem;

    height: 0.5rem;

    background: #fff;

    border: 1px solid #f18900;

    cursor: pointer;

    border-radius: 0.25rem;

    -webkit-appearance: none !important;

}

js

 //将秒数转为00:00格式

 function timeToStr(time) {

     var m = 0,

     s = 0,

     _m = '00',

     _s = '00';

     time = Math.floor(time % 3600);

     m = Math.floor(time / 60);

     s = Math.floor(time % 60);

     _s = s < 10 ? '0' + s : s + '';

     _m = m < 10 ? '0' + m : m + '';

     return _m + ":" + _s;

 }

 //触发播放事件

 $('.play').on('click',function(){

     var audio=document.getElementById('ao');

     audio.play();

     setInterval(function(){

         var t=parseInt(audio.currentTime);

     $(".range").attr({'max':751});

     $('.max').html(timeToStr(751));

         $(".range").val(t);

     $('.cur').text(timeToStr(t));

     },1000);

 });

 //监听滑块，可以拖动

 $(".range").on('change',function(){

     document.getElementById('ao').currentTime=this.value;$(".range").val(this.value);
 });

以上基本可以实现自定义音频播放，但是在拖动进度条的时候出现了问题，电脑上是ok的，但是在手机上可以拖动，只不过音频的总时长比正常播放少了好几分钟，导致拖动进度后播放不准确。通过测试发现手机上拿到的duration（总时长）跟电脑上不一样，导致滑动后播放位置不准确。究其原因发现因为上传的音频被我压缩了，所以在手机上拿到的duration就跟正常的不一样。所以音频经过压缩后在手机上其duration就会变（电脑上不会），以后要注意。如果有什么既可以压缩音频也可以在手机上拿到正常duration的方法，麻烦告知小弟，哈哈。

改进：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>audio</title>

    <style>

    /* 进度条 */

    .range {

        width: 5.875rem;

        height: 0.15rem;

        background: #2386e4;

        border-radius: 0.25rem;

        -webkit-appearance: none !important;

        position: absolute;

        top: 3.55rem;

        left: 6rem;

    }

    /* 进度滑块 */

    .range::-webkit-slider-thumb {

        width: 0.5rem;

        height: 0.5rem;

        background: #fff;

        border: 1px solid #f18900;

        cursor: pointer;

        border-radius: 0.25rem;

        -webkit-appearance: none !important;

    }

    </style>

</head>

<body>

    <audio src='2012.mp3' id='ao'></audio>

    <span class='cur'></span><input type="range" min=0 max=100 class='range' value=0><span class='max'></span>

    <button class='play'>play</button>

    <button class='pause'>pause</button>

    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

    </script>

    <script>

    //将秒数转为00:00格式

    function timeToStr(time) {

        var m = 0,

        s = 0,

        _m = '00',

        _s = '00';

        time = Math.floor(time % 3600);

        m = Math.floor(time / 60);

        s = Math.floor(time % 60);

        _s = s < 10 ? '0' + s : s + '';

        _m = m < 10 ? '0' + m : m + '';

        return _m + ":" + _s;

    }

    //触发播放事件

    var audio=document.getElementById('ao');

    $('.play').on('click',function(){

        var duration=audio.duration;

        $(".range").attr({'max':duration});

        $('.max').html(timeToStr(duration));

        audio.play();

        function timer(){

          var t=parseInt(Math.round(audio.currentTime));

          $(".range").val(t);

          $('.cur').text(timeToStr(t));

          t=parseInt(audio.currentTime);

          if(t<duration){

            setTimeout(timer, 1000);

          }else{

            clearTimeout(timer);

          }

        }

        timer();

    });

    $('.pause').on('click', function(){

        audio.pause();

    })

    //监听滑块，可以拖动

    $(".range").on('change',function(){

        audio.currentTime=this.value;

        console.log(this.value)

        $(".range").val(this.value);

    });

    </script>

    </body>

</html>

h5自定义audio（问题及解决）的更多相关文章

  1. h5新API之WebStorage解决页面数据通信问题

    localStorage相信大家都不陌生,今天我们要讨论的不是怎么存储数据,获取数据.而是看看WebStorage的一些妙用,相信大家在开发中遇到过这样一个场景,一个页面中嵌套一个iframe,ifr ...

  2. h5 的 audio 标签知识点

    因为音频格式有版权,各浏览器使用不同的音频格式. 音频格式兼容性 音频格式 Chrome Firefox IE9 Opera Safari MP3 支持 不支持 支持 不支持 支持 OGG 支持 支持 ...

  3. H5之audio标签放音兼容所有浏览器方法

    前端交流群,群文件提供大量文档.书籍和资料.期待你的加入!群号:127768464 由于项目需要,最近刚做了一个网页放音的功能,使用到了H5新标签<audio></audio> ...

  4. Thinkphp5.1允许uni-app的H5跨域请求接口解决方法

    情景: uni-app使用vue框架开发混合APP,虽然APP或者小程序没有跨域,但希望就是写完这个既有H5,又有APP,小程序等,所以能通过后端解决跨域最好.但是不知道是vue的原因还是什么,在PH ...

  5. 【转】h5页面audio不自动播放问题

    1.audio:html5音频标签 <audio loop src="/photo/aa.mp3" id="audio" autoplay preload ...

  6. 微信h5页面audio标签在ios下不能自动播放

    背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐 出现的问题:在安卓手机上正常,iOS中没有反应 后来网上一番搜索后了解到时因为iOS不允许自动播放音乐, ...

  7. zabbix 获取不到自定义脚本的值解决

    agent端: zabbix 自定义脚本 [root@localhost script]# cat check_ping.sh #!/bin/bash result=$(/usr/local/nagi ...

  8. 自定义JS乘法运算误差解决！

    在实际开发中遇到这样一个乘法公式:数量*单价=总价 像这样的浮点数列子:200*8.2,JS算出的结果是: 像这种浮点数的乘法计算就会有误差,我们需要得到准确的值应该是:1640,与我们后台C#计算结 ...

  9. (C)spring boot读取自定义配置文件时乱码解决办法

    这是入门的第三天了,从简单的hello spring开始,已经慢慢接近web的样子.接下来当然是读取简单的对象属性了. 于是按照网上各位大神教的,简单写了个对象book,如上一篇(B),其他配置不需要 ...

随机推荐

  1. 基于Adobe Flash平台的3D页游技术剖析

    写在前面 从黑暗之光,佛本是道,大战神的有插件3D页游.再到如今的魔龙之戒. 足以证明,3D无插件正在引领页游技术的潮流. 目前,要做到3D引擎,有以下几个选择. 说到这里,我们发现.这些都不重要. ...

  2. ASP.NET MVC Model绑定(五)

    ASP.NET MVC Model绑定(五) 前言 前面的篇幅对于IValueProvider的获取位置和所处的生成过程做了讲解,本篇将会对IValueProvider的使用做个基础的示例讲解,读完本 ...

  3. mybatis Generator生成代码及使用方式

    本文原创,转载请注明:http://www.cnblogs.com/fengzheng/p/5889312.html 为什么要有mybatis mybatis 是一个 Java 的 ORM 框架,OR ...

  4. ABP源码分析六：依赖注入的实现

    ABP的依赖注入的实现有一个本质两个途径:1.本质上是依赖于Castle这个老牌依赖注入的框架.2.一种实现途径是通过实现IConventionalDependencyRegistrar的实例定义注入 ...

  5. Entity Framework 6 Recipes 2nd Edition（10-9）译 -> 在多对多关系中为插入和删除使用存储过程

    10-9. 在多对多关系中为插入和删除使用存储过程 问题 想要在一个无载荷的多对多关系中使用存储过程(存储过程只影响关系的连接表) 解决方案 假设有一个多对多关系的作者( Author)表和书籍( B ...

  6. java -version 问题

    我把 JAVA_HOME 从8改成了 7 , 为什么还是 显示的8啊 ! E:\sv0\jars>java -version java version "1.8.0_111" ...

  7. Android Material Design之 NavigationView侧滑界面自定义 随笔

    一.侧滑界面Menu自定义: 在menu文件夹下新建activity_main_drawer.xml文件,自定义标题和icon: <?xml version="1.0" en ...

  8. 异步与并行~List<T>是线程安全的吗？

    返回目录 题目有点意思,大家都知道Dictionary<K,V>不是线程安全的类型,而List<T>是线程安全的吗?在今天之前大叔没有去测试过,而就在今天也是一个VIP问我,说 ...

  9. 判断用户是否是第一次打开该app

    package com.example.fujilun_2; import android.app.Activity; import android.content.Intent; import an ...

  10. TSQL 分组集（Grouping Sets）

    分组集(Grouping Sets)是多个分组的并集,用于在一个查询中,按照不同的分组列对集合进行聚合运算,等价于对单个分组使用“union all”,计算多个结果集的并集.使用分组集的聚合查询,返回 ...