在好例子网,分享、交流、成长!
您当前所在位置:首页CSS 开发实例Box Model → html5 录音实例源码下载

html5 录音实例源码下载

Box Model

下载此实例
  • 开发语言:CSS
  • 实例大小:0.02M
  • 下载次数:90
  • 浏览次数:5138
  • 发布时间:2014-08-17
  • 实例类别:Box Model
  • 发 布 人:crazycode
  • 所需积分:2
 相关标签: HTML5 录音

实例介绍

【实例简介】
【实例截图】

【核心代码】

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <div>
        <audio controls autoplay></audio>
        <input onclick="startRecording()" type="button" value="录音" />
        <input onclick="stopRecording()" type="button" value="停止" />
        <input onclick="playRecording()" type="button" value="播放" />
        <input onclick="uploadAudio()" type="button" value="提交" />
    </div>

    <script type="text/javascript" src="HZRecorder.js"></script>


    <script>

        var recorder;

        var audio = document.querySelector('audio');

        function startRecording() {
            HZRecorder.get(function (rec) {
                recorder = rec;
                recorder.start();
            });
        }

        function stopRecording() {
            recorder.stop();
        }

        function playRecording() {
            recorder.play(audio);
        }

        function uploadAudio() {
            recorder.upload("Handler1.ashx", function (state, e) {
                switch (state) {
                    case 'uploading':
                        //var percentComplete = Math.round(e.loaded * 100 / e.total)   '%';
                        break;
                    case 'ok':
                        //alert(e.target.responseText);
                        alert("上传成功");
                        break;
                    case 'error':
                        alert("上传失败");
                        break;
                    case 'cancel':
                        alert("上传被取消");
                        break;
                }
            });
        }

    </script>

</body>
</html>

标签: HTML5 录音

实例下载地址

html5 录音实例源码下载

不能下载?内容有错? 点击这里报错 + 投诉 + 提问

好例子网口号:伸出你的我的手 — 分享

网友评论

第 1 楼 mindonglin 发表于: 2015-11-19 23:13 44
sdfsdsdfsfdsfsdfsdfsdfdsfdsf

支持(0) 盖楼(回复)

第 2 楼 linweijian 发表于: 2015-12-10 18:28 38
很好的例子,是我想要的功能,感谢楼主!

支持(0) 盖楼(回复)

第 3 楼 zjhai08 发表于: 2016-05-28 16:11 56
sfsafdsaf

支持(0) 盖楼(回复)

第 4 楼 cdg121 发表于: 2016-06-17 17:07 22
aa

支持(0) 盖楼(回复)

第 5 楼 yzw2278623 发表于: 2016-08-17 18:38 36
无法录音

支持(0) 盖楼(回复)

第 6 楼 yzw2278623 发表于: 2016-08-17 18:38 41
无法录音

支持(0) 盖楼(回复)

第 7 楼 yzw2278623 发表于: 2016-08-17 18:38 49
无法录音

支持(0) 盖楼(回复)

第 8 楼 yzw2278623 发表于: 2016-08-17 18:38 50
无法录音

支持(0) 盖楼(回复)

第 9 楼 yzw2278623 发表于: 2016-08-17 18:38 50
无法录音

支持(0) 盖楼(回复)

第 10 楼 yzw2278623 发表于: 2016-08-17 18:38 50
无法录音

支持(0) 盖楼(回复)

第 11 楼 yzw2278623 发表于: 2016-08-17 18:38 59
无法录音

yzw2278623 2016-08-17 18:38 50

无法录音

支持(0) 盖楼(回复)

第 12 楼 qihu 发表于: 2016-09-01 09:10 58
下载试试 ,感谢楼主分享

支持(0) 盖楼(回复)

第 13 楼 joker123123 发表于: 2016-09-13 15:37 59
东方闪电

支持(0) 盖楼(回复)

第 14 楼 rambo_hong 发表于: 2016-09-20 16:27 25
下载试试 ,感谢楼主分享

支持(0) 盖楼(回复)

第 15 楼 wul 发表于: 2016-09-23 15:37 03
ascas

支持(0) 盖楼(回复)

第 16 楼 444671509lhx 发表于: 2016-11-03 15:21 52
下载试试

支持(0) 盖楼(回复)

第 17 楼 MrZzzz先森 发表于: 2016-11-09 10:26 04
ffffffffff

支持(0) 盖楼(回复)

第 18 楼 1129701845 发表于: 2017-02-04 18:08 24
1111111111111

支持(0) 盖楼(回复)

第 19 楼 徐文峰 发表于: 2017-03-02 15:59 39
1111111

支持(0) 盖楼(回复)

第 20 楼 qazlxp 发表于: 2017-05-16 20:27 46
很好的例子

支持(0) 盖楼(回复)

第 21 楼 周大肠 发表于: 2017-05-31 15:27 29
不错

支持(0) 盖楼(回复)

第 22 楼 影子冷锋 发表于: 2017-11-13 11:23 03
学习学习

支持(0) 盖楼(回复)

第 23 楼 影子冷锋 发表于: 2017-11-13 11:23 41
学习学习

支持(0) 盖楼(回复)

发表评论

(您的评论需要经过审核才能显示)

查看所有23条评论>>

小贴士

感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。
;
报警