zoukankan      html  css  js  c++  java
  • 音频的录制和播放功能(audio) ---- HTML5+

    模块audio

    Audio模块用于提供音频的录制和播放功能,可调用系统的麦克风设备进行录音操作,也可调用系统的扬声器设备播放音频文件。通过plus.audio获取音频管理对象。

    应用场景:音频录制,语言聊天,语言留言,音频播放;

    对象应该有两个:录音(AndioRecorder)和播放(AudioPlayer ):

    录音:一个成功回调,一个失败回调;option有三个参数,有用的是filename这个音频存放的位置;

    播放:一个成功回调,一个失败的回调;

    play(successCB,errorCB);

    pause();暂停;

    resume();重来;

    stop();停止;

    seekTo(position);position传递的参数是多少,一秒为单位,跳转到多少秒;

    getDuration(position);音频播放之前需要去取的值,如果视频是1分30秒播放完,那么返回的值就是90秒;

    getPosition:我这个视频播放到哪里了;如果要实时调用播放到哪里,就用定时器去调用;

    setRoute(route);这个方法不是必须的,有默认值;(默认是扬声器,不可能在听筒里面播放音乐,但是微信是有这个的)

    方法

    getRecorder();// 获取录音设备; plus.audio.getRecorder();

    createPlayer();//创建播放器;plus.audio.createPlayer(path);

    示例

    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">音频录音</h1>
    </header>
    <div class="mui-content mui-content-padded">
        <button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="btnStartRecord">开始录音</button>
        <button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="btnEndRecord">结束录音</button>
        <div id="time"></div>
        <ul class="mui-table-view" id="mList"></ul>
    </div>
    <script src='http://libs.baidu.com/jquery/1.8.3/jquery.min.js'></script>
    <script src="js/mui.min.js"></script>
    <script type="text/javascript">
    mui.plusReady(function(){    
        var recorder = null;
        var recorderTimer = null;
        var time = 0;
        $("#btnStartRecord").bind('tap',function(){
            startRecord();
        });
        $("#btnEndRecord").bind('tap',function(){
            endRecord();
        });    
        function startRecord(){
            recorderTimer = setInterval(function(){
                time++;
                $("#time").html(time);
            },1000);
            // 1.创建recorder
            recorder = plus.audio.getRecorder();
            // 2.录音
            recorder.record({filename:"_doc/audio/"},function(filePath){
                plus.io.resolveLocalFileSystemURL(filePath,function(entry){
                    console.log(filePath);
                    console.log(entry);
                    var listStr = "<li class='mui-table-view-cell'><a class='mui-navigate-right recordItem'>"+filePath+"</a></li>";
                $("#mList").append(listStr);
                $(".recordItem").bind('tap',function(){
                    var oName = $(this).text();
                    alert(oName);
                    var path = "";
                    var player = plus.audio.createPlayer(oName);
                    player.play(function(){
                        console.log('play ended');
                    },function(e){
                        console.log("message:"+e.message);
                    });
                });
                },function(e){
                    console.log("读取录音失败:"+e.message);
                });
            });
            
        }
        function endRecord(){
            // 3.停止录音
            clearInterval(recorderTimer);
            recorder.stop();
        };
    });
    </script>
  • 相关阅读:
    vue-生命周期图示 注解
    vue-组件嵌套之——父组件向子组件传值
    vue-框架模板的源代码注释
    vue-小demo、小效果 合集(更新中...)
    Gulp-自动化编译sass和pug文件
    JS
    Node.js- sublime搭建node的编译环境
    sublime--package control的配置与插件安装
    git-常用命令一览表
    java面试题:jvm
  • 原文地址:https://www.cnblogs.com/e0yu/p/7840167.html
Copyright © 2011-2022 走看看