HTMLjs录音功能，上传到七牛云，不好用不要钱

文章目录

录音截图
源码节选
完整源码

录音截图

源码节选

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>H5录音测试</title><link rel="stylesheet" type="text/css" href="css/bootstrap.css"><link rel="stylesheet" type="text/css" href="css/main.css"><link rel="stylesheet" type="text/css" href="css/audio.css"><style type="text/css">.remoteButton{display:block !important;width: 250px;margin: 0 auto;}.remoteButton ul li{display:inline-block;}</style><script type="text/javascript" src="lib/require.js"></script><script type="text/javascript" src="common/js/require_conf.js"></script><script type="text/javascript" src="js/HZRecorder.js"></script><script src="js/speaking2.js"></script><script type="text/javascript" src="js/player.js"></script>
</head>
<body><audio id="au-record" controls autoplay style="display: none;"></audio><input type="hidden" id="hd-audioSrc"><div class="tolPage"><!-- <div class="header"><div class="titleWrap"><span class="headerTitle">Speaking Test</span><a class="exit">Exit</a></div></div> --><div class="speak-content"><div class="content content-speak-test"><div class="speakContent"><div class="mirophone"><ul><li class="mirophoneEnTips">Select Microphone</li><li class="mirophoneOption"><select><option>H5WavRecorder</option></select></li><li class="mirophoneChTips"><div class="record-volume-bar lightBlue"></div><div class="microphoneTip">您可以测试麦克风了！</div></li></ul></div><div class="controlButton"><ul><li id="recording" class="butBig">Recording</li><li id="stop" class="butSmall butInvalid">Stop</li><li id="play" class="butBig butInvalid">Play</li><li id="retry" class="butSmall butInvalid">Retry</li><li id="test" class="butSmall butInvalid" style="display:none;">test</li><li id="saveLocal" class="butSmall butInvalid" style="display:none;">local</li></ul></div><div class="controlButton remoteButton"><ul><li id="upload" class="butSmall butInvalid">Upload</li><li id="remotePlay" class="butBig butInvalid">Remote Play</li></ul></div><!-- 音频播放 --><div class="audio-tool"><!-- 左侧 --><audio id="playAudio" src=""></audio><div class="left-tool"><ul class="play-btn"><li id="play_btn" class="play wg-button stop" title="播放"><span class="wg-button-inner"><a hidefocus="true" class="player-play"></a></span></li><li id="push_btn" class="play wg-button push" style="display: none;" title="暂停"><span class="wg-button-inner"><a hidefocus="true" class="player-pause"></a></span></li></ul></div><!-- 右侧 --><div class="right-panel"><div class="volume" id="volumeWrap"><a class="mute wg-button" style="display:none;" hidefocus="true" title="静音"><span class="wg-button-inner"></span></a><a class="muted wg-button" style="display:none;" hidefocus="true" title="静音"><span class="wg-button-inner"></span></a><div class="vol-slider-wrapper"><div id="volSlider"><div class="ui-slider-range" style="width:0%; overflow:hidden;"><span class="ui-slider-range-inner"></span></div><a class="ui-slider-handle" hidefocus="true" style="left:0%;"></a></div></div></div></div><!-- 中间 --><div class="main-panel"><div class="pane"><time class="time player-current-time">0:00</time><time class="time player-duration-time">0:00</time><div class="progress-wrapper" id="progress_bar"><div id="progressSlider" class="ui-slider-horizontal"><!-- 加载进度 --><div class="player-progress-loaded"></div><div class="ui-slider-range player-progress-position"></div><a class="ui-slider-handle player-progress-control" hidefocus="true"></a></div></div></div></div></div></div></div></div></div>
</body>
</html>

完整源码

源码下载地址1
源码下载地址2
源码下载地址3
源码下载地址4

HTMLjs录音功能，上传到七牛云，不好用不要钱相关推荐

将base64编码图片上传到七牛云
将base64编码图片上传到七牛云接口说明 FAQ >对象存储 >上传下载> 如何上传base64编码图片到七牛云在七牛云FAQ上有一篇文章,讲解的接口的使用 https://d ...
调用图片文件夹中的任意图片随机显示_hexo框架下，实现图片一键式上传到七牛云
在使用hexo框架驱动个人博客时,图片的插入是一个比较费心的事情以我为例,我使用hexo+Github搭建个人独立博客但是Github仓库提供的存储空间是有限的,如果把图片保存到本地(对应的是Gi ...
接口查询的数据生成excel上传到七牛云
接口查询的数据生成excel上传到七牛云一.注册七牛云并新建一个存储空间我们公司已经有一个七牛云的账号,登录进去之后创建一个新的对象存储空间.命名为eval_mobile.酒会有一个默认的融合 C ...
java实现后台直接生成二维码图片并直接上传到七牛云上面
java实现后台直接生成二维码图片并直接上传到七牛云上面需求:后台是直接根据唯一核销码生成图片,然后的话直接上传到七牛云,数据库只是保存地址,一开始也想错了,想成了创建临时文件存储生成的图片再上传到 ...
php（TP5）图片无损压缩上传到七牛云
php图片无损压缩上传到七牛云 private $image; //重绘图片private $imageinfo; //重绘图片的具体信息(array)private $percent = 1; // ...
基于海豚PHP框架七牛云（插件），合成小程序分享图并上传到七牛云
<?php // +---------------------------------------------------------------------- // | 海豚PHP框架 [ D ...
C# 文件上传到七牛云服务器（一）
本章讲述:C# 中调用七牛云提供的SDK,实现文件简单上传功能. 分片,断点续上传讲解,请查看:C# 文件上传到七牛云服务器(二) 地址为: 开发流程步骤地址:https://blog.csdn.ne ...
二维码生成并上传至七牛云返回图片URL
背景:最近一个项目的优惠券模块,需要将优惠券的券号转换成二维码展示出来,并保证能够被扫码枪识别. 接着,简要说明下编码思路,或者说步骤: 引入 qrcode 的Jar依赖调用API,合理配置相关属性 ...
Spring Boot使用Simditor富文本编辑器，并将图片上传到七牛云。
开始之前,需要强调的是Simditor富文本编辑器是基于Jquery的.所以必须引入Jquery.Simditor下载地址下载解压后会发现是整个simditor项目,很多东西项目根本不需要,只需要将 ...
php七牛云批量上传,七牛云——批量将本地图片上传到七牛云
前言在本地大概有10w左右的头像图片,打算批量上传到七牛云,寻找后发现了一个神奇的官方工具,十分的好用工具资源批量上传和多文件上传我这里上传本地用的是QsunSync QsunSync Git ...

HTMLjs录音功能，上传到七牛云，不好用不要钱

文章目录

录音截图

源码节选

完整源码

HTMLjs录音功能，上传到七牛云，不好用不要钱相关推荐

最新文章

热门文章