澳门太阳娱乐集团官网-太阳集团太阳娱乐登录

H5移动端音频播放器
分类:网页制作

一抬手一动脚端H5音频与录制难题及技术方案

2015/09/16 · HTML5 · 1 评论 · 视频, 音频

原稿出处: Aaron的博客   

多年来在研讨用录制代替动画,已经上马有成果了,顺便总计下几年支付中遇见的其实难点及给出自身的化解方案

看下最后实效:包容PC,iphone, 安卓5.0

消除了,手动,自动,不全屏的标题

左边录像取代了动画片,然后援救背景蒙板效果,能够透出底图

右边手是原摄像文件

澳门太阳娱乐集团官网 1

H5 audio音频

  • 每趟经过 new 奥迪o 三个节奏对象,在IOS上能够见到会时有产生叁个新的线程,这么些很恶心

缓慢解决方案:

new 奥迪o贰个对象,通过轮换分歧的音频地址,达到非常的少开线程的目标

  • 在安卓上支撑不给力

减轻方案:

低版本安卓上的主题材料没解,一般是良莠不齐开荒都以足以调底层接口管理的,举个例子phonegap

  • iphone上不能够自动播放

缓慢解决方案:

iphone上自动播放,是IOS设计的的时候做的叁个管理,貌似是为了防卫自动盗用流量吧

轻巧的话,需求效法客户手动去触发才干够

就此我们须求在最初阶调用那样一段代码:

那是本身项目上的,作者就径直扣过来了

JavaScript

//修复ios 浏览器不能自动播放音频的难点 在加载时创建新的audio 用的时候退换src就可以 Xut.fix = Xut.fix||{}; if (Xut.plat.isBrowser && Xut.plat.isIOS) { var is奥迪o = false var fixaudio = function() { if (!isAudio) { isAudio = true; Xut.fix.audio = new Audio(); document.removeEventListener('touchstart', fixaudio, false); } }; document.addEventListener('touchstart', fixaudio, false); }

1
2
3
4
5
6
7
8
9
10
11
12
13
//修复ios 浏览器不能自动播放音频的问题 在加载时创建新的audio 用的时候更换src即可
Xut.fix = Xut.fix||{};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
    var isAudio = false
    var fixaudio = function() {
        if (!isAudio) {
            isAudio = true;
            Xut.fix.audio = new Audio();
            document.removeEventListener('touchstart', fixaudio, false);
        }
    };
    document.addEventListener('touchstart', fixaudio, false);
}

假若在body上绑定那样一个代码:通过手动触发创制三个audio对象,然后保留在全局中

在动用的时候如下

JavaScript

//假设为ios browser 用Xut.fix.audio 钦命src 开首化见app.js if (Xut.fix.audio) { audio = Xut.fix.audio; audio.src = url; } else { audio = new 奥迪o(url); } audio.autoplay = true; audio.play();

1
2
3
4
5
6
7
8
9
10
11
//如果为ios browser 用Xut.fix.audio 指定src 初始化见app.js
if (Xut.fix.audio) {
    audio
=
Xut.fix.audio;
    audio.src = url;
} else {
    audio = new Audio(url);
}
audio.autoplay = true;
audio.play();

一贯交流音频对象就可以,简单的讲,便是要自行就亟须是客户触发创制的对象才干播

H5 video音频

录像标签也许在移动端用的相当少,安卓帮忙太烂了,目测5.0才好转

iphone上老难点,不能够自动播放(省流量啊,省你妹!!!),何况默许就是全屏控件播放

不长一段时间里,小编都没理会那一个摄像拍卖,安卓用底层,iphone直接用VideoJS,内置flash与h5切换的,flash也是有支撑难题

前阵子高管有个必要,我们利用动画太多了,都以乖巧路径的整合卡通,三个app下来上百M 到几百M不等

于是须求有贰个方案得以减弱图片

最后的方案是利用摄像代替动画,因为录像压缩技艺发展了过多年,已经极其成熟了。未来录制压缩工夫,能够很自在地将720P的

高清电影,压缩到10M/分钟,也许160K/秒。比图像类别的文件尺寸,至少小了几十倍。相同的时间,在于大多数配备,都支持对摄像的

澳门太阳娱乐集团官网,硬件解压缩,那样吧,摄像播放的CPU消耗好低,电瓶消耗也好低,同时播报速度还快。即便25帧的全荧屏播放,也能随随意便地实

现。

方案定下来,需求减轻的多少个难题就来了

  1. 任何录像,富含录像中的有些物体,能够响应客户的点击、滑动之类的操作
  2. 在小米上边,能够在三个窗口中播放
  3. 能够过滤掉背景,进而能像PNG图像一样使用

终极的实效也是从头gif动画所示:

摄像庖代了动画片,然后支持背景蒙板效果,能够透出底图

并且也化解了,手动,自动,不全屏的主题材料

iphone窗口化

减轻方案:

经过canvas + video标签结合管理

规律: 获取video的原图帧,通过canavs绘制到页面

这里作者平素附上源码把,代码写的相似,不过优良了多少个相当重要

1 赞 2 收藏 1 评论

澳门太阳娱乐集团官网 2

详解移动端HTML5音频与录制难题及缓慢解决方案,html5音频

多年来在斟酌用摄像替代动画,用摄像代替Smart动画,我们称这种录制叫做交互录像。

古板的机敏动画:

  1. 磁盘空间大,下载慢,特别是在线播放,会越来越慢
  2. 文本太多,在线播放的时候,太多http央求,会导致响应慢,或许表现成失常态

因此,急需开辟了一套技巧,用录制替代精灵动画。大家称这种摄像叫做交互录像

观念摄像的题目:

  1. 古板录像,只好在方块形的区域中播放
  2. 价值观的录制,在平板电脑下是窗口播放,在索尼爱立信下边,只好全屏播放
  3. 观念的录像,播放的时候,一定相会世在最前端

互相摄像具备如下特征:

  1. 在Nokia上面,没有要求全屏播放,能够在两个区域中播放
  2. 相互摄像能够出现在日常图形对象的上边
  3. 互相摄像能够分包蒙板,那样能够去掉录像的背景,让录像和日常图形对象融为一体

 总结:仅仅播放用的录像,大家就将其安装为观念摄像。而急需用于特定用途的录像,大家就将其安装为互相录像。

其钻探已经早先有收获了,顺便总计下几年活动H5开荒中音频与视频碰到的实在难题及给出自身的缓和方案

看下最后实效:兼容PC(>IE9) ,iphone,ipad, 安卓5.0

竭泽而渔了iphone上,手动、自动、窗口化等难点,基本能用于实际生育了

侧边是原录制DVD文件

左边录制替代了动画,然后支持背景蒙板效果,能够透出底图,支持一多元的互相操作

澳门太阳娱乐集团官网 3

H5 audio音频

老是通过 new 奥迪(Audi)o 贰个节奏对象,在IOS上得以阅览会生出一个新的线程,那一个很恶心

焚林而猎方案:new 奥迪o二个目的,通过轮换分化的节奏地址,达到非常的少开线程的目的

在安卓上支撑不给力

缓和方案:低版本安卓上的难题没解,一般是备位充数开垦都以足以调底层接口处理的,比方phonegap

iphone上不能自动播放

建设方案:iphone上自动播放,是IOS设计的的时候做的三个拍卖,貌似是为着以免自动盗用流量吧

大约来讲,需求效法客商手动去触发能力够,所以咱们需求在最开头调用那样一段代码:

那是自己项目上的,作者就直接扣过来了

//修复ios 浏览器不能自动播放音频的问题 在加载时创建新的audio 用的时候更换src即可
Xut.fix = Xut.fix||{};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
    var isAudio = false
    var fixaudio = function() {
        if (!isAudio) {
            isAudio = true;
            Xut.fix.audio = new Audio();
            document.removeEventListener('touchstart', fixaudio, false);
        }
    };
    document.addEventListener('touchstart', fixaudio, false);
}

举个例子在body上绑定那样一个代码:通过手动触发创造多个audio对象,然后保留在大局中

在选拔的时候如下

//如果为ios browser 用Xut.fix.audio 指定src 初始化见app.js
if (Xut.fix.audio) {
    audio 
=  Xut.fix.audio;
    audio.src = url;
} else {
    audio = new Audio(url);
}
audio.autoplay = true;
audio.play();

一贯沟通音频对象就可以,简来讲之,就是要自行就务须是客户触发创制的对象手艺播

H5 video音频

录像标签或许在移动端用的相当少,安卓扶助太烂了,目测5.0才好转

iphone上老难点,不可能自动播放(省流量啊,省你妹!!!),并且暗许正是全屏控件播放

十分短一段时间里,作者都没理会那么些摄像拍卖,安卓用底层,iphone直接用VideoJS,内置flash与h5切换的,flash也许有支撑难点

前阵子首席营业官有个须要,大家应用动画太多了,都以灵动路径的三结合卡通,叁个app下来上百M 到几百M不等

就此供给有二个方案能够减去图片

末段的方案是使用录制代替动画,因为录制压缩技能升高了多数年,已经不行早熟了。以后录像压缩本事,能够很自在地将720P的高清影片,压缩到10M/分钟,或许160K/秒。比图像体系的文件尺寸,至少小了几十倍。同一时候,在于大多数配备,都扶助对录制的硬件解压缩,那样吗,录像播放的CPU消耗相当低,电池消耗也异常低,同期播放速度还快。就算25帧的全显示器播放,也能自由地促成。

方案定下来,要求化解的多少个难题就来了

1.全套摄像,包涵录制中的有个别物体,能够响应客户的点击、滑动之类的操作
2.在BlackBerry上边,可以在几个窗口中播放
3.能够过滤掉背景,进而能像PNG图像同样使用

终极的实效也是初叶gif动画所示:

录像代替了动画,然后帮忙背景蒙板效果,可以透出底图

再者也解决了,手动,自动,不全屏的主题素材 

iphone窗口化

赶尽杀绝方案:

由此canvas + video标签结合管理

原理: 获取video的原图帧,通过canavs绘制到页面

此处本俗世接附上源码把,代码写的形似,但是出色了多少个关键

摄像代替动画

以此有个别麻烦,要求做交互,拖动canvas达到调控图像的指标,这两天小编还尚未任何写完,一般的营业所供给也不会有其一这里大致的叙说下,一样是canvas + video管理的,然而供给有三个缓存的canvas容器做八个预管理,通过预管理,获得每一张图的像素点,通过退换每三个像素点RBG的值,达到能够过滤掉背景,进而能像PNG图像同样使用,未来写好了,在昭示吧~~

上述正是本文的全体内容,希望对大家的就学抱有补助,也指望大家多多辅助帮客之家。

这两天在切磋用录像代替动画,用录制取代Smart动画,大家称这种录像叫做交互录像。...

转载自:https://blog.csdn.net/Dandelion_drq/article/details/77645659

以下是自身修改的代码:
html代码:
<div class="courseInfo">
<p class="picTeacher">
<img src="../img/Group 8 Copy.png" />
<span class="teacherDetial">课程实际情况</span>
</p>
<p class="audioC">音频课程</p>
<div class="audio-wrapper">
<audio>

<source src="" type="audio/mp3">
</audio>
<div class="audio-left"><img id="audioPlayer" src="../img/Group 4 Copy.png"></div>
<div class="audio-right">
<p class="teacherName"><span>上帝视角看民宿行当 - 马化腾(英文名:Pony)</span><span class="tryListen">试听七分钟</span></p>
<div class="progress-bar-bg" id="progressBarBg"><span id="progressDot"></span>
<div class="progress-bar" id="progressBar"></div>
</div>
<div class="audio-time"><span class="audio-length-current" id="audioCurTime">00:00</span><span class="audio-length-total"></span></div>
</div>
</div>
</div>

css代码:
.audio-wrapper {
width: 90%;
margin-left: 5%;
margin: 1.2rem auto;
height: 7.357rem;
border: 1px solid #e0e0e0;
background: #FFFFFF;
box-shadow: 0 2px 0.857rem 0 rgba(0,0,0,0.07);
border-radius: 0.571rem;
}
.audio-left {
float: left;
text-align: center;
width: 16%;
height: 100%;
}
.audio-left img {
width: 2.285rem;
position: relative;
top: 2.785rem;
margin: 0;
display: initial; /* 解除与app的样式争辨 /
cursor: pointer;
}
.audio-right {
margin-right: 2%;
float: right;
width: 82%;
height: 100%;
}
.audio-right p {
height: 35%;
margin: 1.142rem 0;
/
歌曲名称只展现在一行,超越部分显得为简易号 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: PingFang-SC-Medium;
font-size: 0.928rem;
color: #333333;
}
.progress-bar-bg {
position: relative;
height: 0.428rem;
width: 94%;
margin-top: -1.3rem;
margin-left: .5rem;
cursor: pointer;
background: #F6F5F8;
border-radius: 0.571rem;
}
.progress-bar {
width: 0;
height: 0.428rem;
background: #3D7ADE;
border-radius: 0.571rem;
}
.progress-bar-bg span {
content: " ";
width: 0.714rem;
height: 0.714rem;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background-color: #3e87e8;
position: absolute;
left: 0;
top: 50%;
margin-top: -0.357rem;
margin-left: -0.357rem;
cursor: pointer;
}
.audio-time {
overflow: hidden;
margin-top: 0.629rem;
margin-left: 0.3rem;
font-family: PingFangSC-Regular;
font-size: 0.857rem;
color: #999999;
}
.audio-length-total {
float: right;
font-size: 0.857rem;
}
.audio-length-current {
float: left;
font-size: 0.857rem;
}
.teacherName{
width: 100%;
position: relative;
font-family: PingFang-SC-Medium;
font-size: 0.928rem;
color: #333333;
}
.teacherName .tryListen{
position: absolute;
right: 0.2rem;
border: 0.5px solid #FF7200;
border-radius: 0.714rem;
padding: 0.1rem 0.4rem;
font-family: PingFang-SC-Regular;
font-size: 0.785rem;
color: #FF7200;
letter-spacing: 0;
text-align: center;
}
.teacherDetial{
font-family: PingFangSC-Semibold;
font-size: 1.214rem;
color: #333333;
letter-spacing: 0;
}

js代码:
<script>
$(document).ready(function () {
// 调控音频文件名显示上涨的幅度
var maxW = $('.audio-right').width();
$('.audio-right p').css({
"max-width": maxW
});

        initAudioEvent();
    });

    /**
     * 初始化音频控制事件
     */
    function initAudioEvent() {
        var audio = $('audio')[0];
        console.log(audio.duration)
        // 点击播放/暂停图片时,控制音乐的播放与暂停
        $('#audioPlayer').click(function () {
            if(audio.currentTime >=180){
                return false;
            }
            // 监听音频播放时间并更新进度条
            audio.addEventListener('timeupdate', function () {
                updateProgress(audio);
                console.log(updateProgress(audio))
            }, false);

            // 监听播放完成事件
            audio.addEventListener('ended', function () {
                audioEnded();
            }, false);

            // 改变播放/暂停图片
            if (audio.paused) {
                // 开始播放当前点击的音频
                audio.play();
                $('#audioPlayer').attr('src', '../img/Group 33 Copy 6.png');
            } else {
                audio.pause();
                $('#audioPlayer').attr('src', '../img/Group 4 Copy.png');
            }
            console.log(audio.currentTime);
            //试听三分钟
            if(audio.currentTime >=180){
                audio.pause();
                $('#audioPlayer').attr('src', '../img/Group 4 Copy.png');
            }
        });

        // 点击进度条跳到指定点播放
        // PS:此处不要用click,否则下面的拖动进度点事件有可能在此处触发,此时e.offsetX的值非常小,会导致进度条弹回开始处(简直不能忍!!)
        $('#progressBarBg').on('mousedown', function (e) {
            // 只有音乐开始播放后才可以调节,已经播放过但暂停了的也可以
            audio.currentTime = 10;
            if (!audio.paused || audio.currentTime != 0) {  //音频播放,且播放时间不为0. 如果音频暂停,则audio.paused为true
                var pgsWidth = $('.progress-bar-bg').width();
                var rate = e.offsetX / pgsWidth;
                audio.currentTime = audio.duration * rate;   //在火狐、IE浏览器中设置成功,但是在chrome中失败。解决方案:将src把音频/视频放到服务器,使用http://的播放地址
                console.log(audio.currentTime)
                //试听三分钟
                if(audio.currentTime >=180){
                    audio.pause();
                    $('#audioPlayer').attr('src', '../img/Group 4 Copy.png');
                }
                updateProgress(audio);
            }
        });

        var dot = document.getElementById('progressDot');

        // 鼠标拖动进度点时可以调节进度
        // 只有音乐开始播放后才可以调节,已经播放过但暂停了的也可以
        // 鼠标按下时
        dot.onmousedown = function (e) {
            if (!audio.paused || audio.currentTime != 0) {
                var oriLeft = dot.offsetLeft;
                var mouseX = e.clientX;
                var maxLeft = oriLeft; // 向左最大可拖动距离
                var maxRight = document.getElementById('progressBarBg').offsetWidth - oriLeft; // 向右最大可拖动距离

                // 禁止默认的选中事件(避免鼠标拖拽进度点的时候选中文字)
                if (e.preventDefault) {
                    e.preventDefault();
                } else {
                    e.returnValue = false;
                }

                // 禁止事件冒泡
                if (e && e.stopPropagation) {
                    e.stopPropagation();
                } else {
                    window.event.cancelBubble = true;
                }

                // 开始拖动
                document.onmousemove = function (e) {
                    var length = e.clientX - mouseX;
                    if (length > maxRight) {
                        length = maxRight;
                    } else if (length < -maxLeft) {
                        length = -maxLeft;
                    }
                    var pgsWidth = $('.progress-bar-bg').width();
                    var rate = (oriLeft + length) / pgsWidth;
                    audio.currentTime = audio.duration * rate;
                    updateProgress(audio);
                };

                // 拖动结束
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            }
        };
    }

    /**
     * 更新进度条与当前播放时间
     * @param  audio - audio对象
     */
    function updateProgress(audio) {
        var value = audio.currentTime / audio.duration;
        $('#progressBar').css('width', value * 100 + '%');
        $('#progressDot').css('left', value * 100 + '%');
        $('#audioCurTime').html(transTime(audio.currentTime));
        $('.audio-length-total').text(transTime(audio.duration));
        if(audio.currentTime >= 180){
            audio.pause();
            $('#audioPlayer').attr('src', '../img/Group 4 Copy.png');   
        }

    }       
    /**
     * 播放完成时把进度调回开始的位置
     */
    function audioEnded() {
        $('#progressBar').css('width', 0);
        $('#progressDot').css('left', 0);
        $('#audioPlayer').attr('src', '../img/Group 4 Copy.png');
    }

    /**
     * 音频播放时间换算
     * @param {number} value - 音频当前播放时间,单位秒
     */
    function transTime(value) {
        var time = "";
        var h = parseInt(value / 3600);
        value %= 3600;
        var m = parseInt(value / 60);
        var s = parseInt(value % 60);
        if (h > 0) {
            time = formatTime(h + ":" + m + ":" + s);
        } else {
            time = formatTime(m + ":" + s);
        }

        return time;
    }

    /**
     * 格式化时间显示,补零对齐
     * eg:2:4  -->  02:04
     * @param {string} value - 形如 h:m:s 的字符串 
     */
    function formatTime(value) {
        var time = "";
        var s = value.split(':');
        var i = 0;
        for (; i < s.length - 1; i++) {
            time += s[i].length == 1 ? ("0" + s[i]) : s[i];
            time += ":";
        }
        time += s[i].length == 1 ? ("0" + s[i]) : s[i];

        return time;
    }
</script>

本文由澳门太阳娱乐集团官网发布于网页制作,转载请注明出处:H5移动端音频播放器

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文