HTML5+ 手机端录音和播放录音

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>录音播放</title>
    <script type="text/javascript" src="../js/jQuery.js"></script>
    <style type="text/css">
        body{
            width: 100%;
            padding: 0;
            margin: 0;
        }
        input{
            padding: .2rem;
            margin: .5rem auto 0 auto;
            font-size: .5rem;
            border-radius: .5rem;
            display: block;
            width: 5rem;
            color: red;
            background: white;
        }
    </style>
</head>
<body>
    <input type="button" value="返回主页" id="ReturnIndex">
    <input type="button" value="点击录音" id="Recorder" />
    <input type="button" value="停止录音" id="StopR">
    <input type="button" value="播放录音" id="Player" />
    <input type="button" value="停止播放" id="StopP" />
</body>
</html>
<script type="text/javascript">
    /**
     * 页面布局rem重置语句
     */
    $(‘html‘).css(‘font-size‘, $(window).width()/10);
    /**
     * 手机端页面初始化事件, 所有操作均要写在在该事件内
     * 否则可能会出现错误: plus is not defind
     */
    document.addEventListener(‘plusready‘, function(){
        /**
         * 获取录音对象 plus.audio.getRecorder()
         * 定义录音文件的保存地址
         */
        var recorder = plus.audio.getRecorder();
        var fileUrl = ‘‘;

        /**
         * 开始录音 recorder.record(option, 成功回调, 失败回调)
         * 结束录音 recorder.stop()
         * option: {
         *    filename: 文件的保存夹
         *       samplerate: 采样率
         *       format: 录音保存的文件后缀名
         * }
         */
        $(‘#Recorder‘).on(‘touchstart‘, function(){
            event.preventDefault();
            var option = {
                filename:"_doc/audio/",
                samplerate: ‘8000‘,
                format: ‘amr‘
            }
            recorder.record({}, function(e){
                fileUrl = e;
            }, function(){
                console.log("录音失败");
            });
        });
        $(‘#StopR‘).on(‘touchstart‘, function(){
            recorder.stop();
        });

        /**
         * 获取播放录音对象  plus.audio.createPlayer(文件地址)
         * 开始播放  player.play(成功回调, 失败回调)
         * 停止播放  player.stop()
         * >>>>>>>>>>>>>>>>>> player 基本方法 >>>>>>>>>>>>>>>>>
         * play(成功回调, 失败回调): 开始播放音频
         * pause(): 暂停播放音频
         * resume(): 恢复播放音频
         * stop(): 停止播放音频
         * seekTo(多少秒): 跳到指定位置播放音频
         * getDuration(): 获取音频流的总长度
         * getPosition(): 获取音频流当前播放的位置
         * setRoute(): 设置音频输出线路
         */
        $(‘#Player‘).on(‘touchstart‘, function(){
            event.preventDefault();
            // 获取音频播放对象
            var player = plus.audio.createPlayer(fileUrl);
            player.play(function(e){
                console.log(e);
                console.log(fileUrl);
            }, function(){
                console.log("播放失败");
            });
            $(‘#StopP‘).on(‘touchstart‘, function(){
                player.stop();
            });
        });

        /**
         * 返回首页
         */
        $(‘#ReturnIndex‘).on(‘touchstart‘, function(){
            location.href = ‘Index.html‘;
        })
    });
</script>
时间: 2024-10-24 23:53:03

HTML5+ 手机端录音和播放录音的相关文章

html5手机端播放音效不卡的方法

html5手机端播放音效不卡的方法线下载http://wxserver.knowway.cn/solosea/js/audioEngine.js 这个是性能不错 然后直接播放音效就可以了 audioEngine.playEffect('/solosea1/music/laidian.mp3', false); 如果切换不了 可以先stop 然后再play audioEngine.stopEffect('/hcfabuhui/music/2.mp3'); 如果延迟 是其他代码性能影响了 预加载也没

HTML5手机端拍照上传

1.accept="image/*" capture="camera" 自动调用手机端拍照功能 accept="image/*" capture="camera" 2.当表单提交时候有文件的时候,需要加上 var formData = new FormData($( "form" )[0]); 3.示例代码: <!DOCTYPE html> <html> <head> &

HTML5手机端手指滑动上拉加载代码

在线预览   源码下载 HTML5手机端手指滑动上拉加载代码是一款通过jquery实现tab切换和上拉加载更多的效果,适用于手机端页面开发.该特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器. 加入前端爱好者QQ群(123235875) 点击加群,共同交流进度!

MT6737 Android N 平台 Audio系统学习----录音到播放录音流程分析

http://blog.csdn.net/u014310046/article/details/54133688 本文将从主mic录音到播放流程来进行学习mtk audio系统架构.  在AudioFlinger::RecordThread::threadLoop中会调用mInput->stream->read读取数据,stream就是audio_stream_in_t类型的指针,在执行open_input_stream时被初始化,先在它其实是一个legacy_stream_in类型的指针.当

HTML5+ 手机端相册的操作

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>WebApp启动页</title> <script type

html5手机端定位

由于项目需要,不得不研究一下手机端的定位. 起初想到的是HTML5定位,本地测试下来,安卓没什么问题,IOS报错,提示不支持http协议.由于后端除了经纬度,还需要城市名之类的详细数据,便调研了一下高德地图.高德地图确实好用,拿到的数据很全面.很快调试完上了测试服务器,结果意外发现一个问题--就是在4G的情况下,微信和QQ直接就是无法获取位置!坑啊,无奈只能转换思路,利用微信JSSDK定位和QQ的接口分别获取到经纬度之后,通过高德地图查询位置的详细信息,当然在浏览器下还是直接利用高德地图来定位.

html5手机端的点击弹出侧边滑动菜单代码

效果预览:http://hovertree.com/texiao/html5/19/ 本效果适用于移动设备,可以使用手机等浏览效果. 源码下载:http://hovertree.com/h/bjaf/mwvn0mxi.htm 本实例用到了toggleClass方法,请参考:http://hovertree.com/h/bjaf/attributes_toggleclass.htm 代码如下: 1 <!doctype html> 2 <html lang="zh">

解决HTML5手机端字体小的问题

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> 这样,在手机上显示的字体大小才正常

H.264视频在android手机端的解码与播放(转)

随着无线网络和智能手机的发展,智能手机与人们日常生活联系越来越紧密,娱乐.商务应用.金融应用.交通出行各种功能的软件大批涌现,使得人们的生活丰富多彩.快捷便利,也让它成为人们生活中不可取代的一部分.其中,多媒体由于其直观性和实时性,应用范围越来越广,视频的解码与播放也就成为研究的热点. H.264标准技术日渐成熟,采用了统一的VLC符号编码,高精度.多模式的位移估计,基于4×4块的整数变换.分层的编码语法等.这些措施使得H.264算法具有很高的编码效率,在相同的重建图像质量下,能够比H.263节