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

最新推荐文章于 2023-10-10 09:26:10 发布

当富网络

最新推荐文章于 2023-10-10 09:26:10 发布

阅读量471

点赞数

分类专栏： Jquery/JavaScript 文章标签： H5 js 录音功能

本文为博主原创文章，未经博主允许不得转载。安卓五千源码下载--https://blog.csdn.net/wuqilianga/article/details/89185887

本文链接：https://blog.csdn.net/wuqilianga/article/details/103389180

版权

Jquery/JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

文章目录

录音截图

在这里插入图片描述

源码节选

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

当富网络

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTMLjs录音功能，上传到七牛云，不好用不要钱

文章目录录音截图源码节选完整源码录音截图源码节选<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>H5录音测试</title> <link rel="stylesheet" type="text/css" href="...
复制链接

扫一扫