码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2017-04-26 20:28:36      阅读:467      评论:0      收藏:0      [点我收藏+]

标签:start   har   logs   保存   jquer   back   type   失败   指定   

<!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>

 

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

标签:start   har   logs   保存   jquer   back   type   失败   指定   

原文地址:http://www.cnblogs.com/lovling/p/6770438.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!