HTML音频audio重构样式以及实现

最新推荐文章于 2023-08-05 10:29:34 发布

One_Piece111

最新推荐文章于 2023-08-05 10:29:34 发布

阅读量931

点赞数 4

分类专栏：应该没人会看文章标签： html 音视频前端

本文链接：https://blog.csdn.net/One_Piece111/article/details/120953142

版权

应该没人会看专栏收录该内容

47 篇文章 0 订阅

订阅专栏

实现样式：

在这里插入图片描述

设计思路

根据点击的区域来加载音频，每次先停止其他音频播放，根据当前的下标来找到类名，对应着进行音频的操作。

Html

<div class="secondary_right_item" style="text-align: justify;">
	<div class="item-box">
	<!--4D影院-->
	<div class="dl_item">
		<img class="img disappear_img" src="assets/img/details/aboutUs/siteMap/-1_4dyy.png" alt="" onclick="onAudio(this)">
		<img class="img_big appear_img" src="assets/img/details/aboutUs/siteMap/-1_4dyy_big.png" alt="" onclick="onAudio(this)">
	</div>
	<!--巨幕影院-->
	<div class="dl_item">
		<img class="img appear_img" src="assets/img/details/aboutUs/siteMap/-1_jmyy.png" alt="" onclick="onAudio(this)">
		<img class="img_big disappear_img" src="assets/img/details/aboutUs/siteMap/-1_jmyy_big.png" alt="" onclick="onAudio(this)">
	</div>
	<!--飞行影院-->
	<div class="dl_item">
		<img class="img appear_img" src="assets/img/details/aboutUs/siteMap/-1_fxyy.png" alt="" onclick="onAudio(this)">
		<img class="img_big disappear_img" src="assets/img/details/aboutUs/siteMap/-1_fxyy_big.png" alt="" onclick="onAudio(this)">
	</div>
	<!--宇宙天文-->
	<div class="dl_item">
		<img class="img appear_img" src="assets/img/details/aboutUs/siteMap/-1_yztw.png" alt="" onclick="onAudio(this)">
		<img class="img_big disappear_img" src="assets/img/details/aboutUs/siteMap/-1_yztw_big.png" alt="" onclick="onAudio(this)">
	</div>
	<!--餐饮部-->
	<div class="dl_item">
		<img class="img appear_img" src="assets/img/details/aboutUs/siteMap/-1_food.png"
			alt="" onclick="onAudio(this)">
		<img class="img_big disappear_img"
			src="assets/img/details/aboutUs/siteMap/-1_food_big.png" alt="" onclick="onAudio(this)">
	</div>
	<img src="assets/img/details/aboutUs/siteMap/-1.png" alt="">
	</div>
	<div class="zp_list_parent" style="background-color: white;">
	<div class="zp_list">
		<div class="content">
			<div class="interval"></div>
			<!-- 设计研究室部分 -->
			<div class="list_col kxwc_flex">
				<div class="big_title_content">
					
						<div class="content_left">
							<img src="assets/img/zhanqu/spaceman.png">
						</div>
						<div class="content_right">
							<p class="B1">设计研究室</p>
							<p class="nr">
								河南省科技馆4D影院位于建筑北翼地下一层，屏幕尺寸15×8.5米，设200左右座位。 4D影院是在3D立体影院基础上发展而来，相比较于3D影院，将震动、坠落、吹风、喷水、挠痒、扫腿等特技引入影院，还根据影片的情景精心设计出烟雾、雨、光电、气泡、气味等效果，形成了一种独特的体验，使观众在观看4D影片时能够获得视觉、听觉、触觉、嗅觉等全方位感受。
							</p>
						
					</div>
				</div>
			</div>
			<!-- 语音部分 -->
			<div class="audio-box">
				<button class="play-pause" id="playPause">
					<span class="icon-btn icon-play"></span>
				</button>
				<audio id="audioTag" src="assets/video/hanhong.mp3"></audio>
				<div class="pgs-explain">
					<span class="explain_language">语音讲解</span>
				</div>
				<div class="a-progress">
	
					<div class="pgs-total">
						<div class="pgs-play" id="progress" style="width: 1%;"></div>
					</div>
					<!-- <div class="pgs-explain">
						<span class="explain_language">语音讲解</span>
					</div> -->
				</div>
				<div class="time-box">
					<span id="playedTime">00:00</span>
					<span>/</span>
					<span id="audioTime">0</span>
				</div>
			</div>
		</div>
		<div class="list_col kxwc_flex" style="margin-top: 30px;">
			<a href="#" class="list_box list_box_fczs">
				<!-- top -->
				<div class="list_block_top">
					<img src="assets/img/zhanqu/cszt-29.jpg">
				</div>
				<!-- bottom -->
				<div class="list_block_footer">
					<div class="col_top_title f_weight show_a_link zp_title_color">神舟五号
					</div>
					<div class="col_bottom_text">
						阿巴阿巴阿巴阿巴河南省科技馆科技知识普阿巴阿巴阿巴阿巴河南省科技馆科技知识普及展览开始啦及展览开始啦</div>
				</div>
			</a>
			<!-- box -->
			<a href="#" class="list_box list_box_fczs">
				<!-- top -->
				<div class="list_block_top">
					<img src="assets/img/zhanqu/cszt-30.jpg">
				</div>
				<!-- bottom -->
				<div class="list_block_footer">
					<div class="col_top_title f_weight show_a_link zp_title_color">航天服
					</div>
					<div class="col_bottom_text">
						阿巴阿巴阿巴阿巴河南省科技馆科技知识普阿巴阿巴阿巴阿巴河南省科技馆科技知识普及展览开始啦及展览开始啦</div>
				</div>
			</a>
			<!-- box -->
			<a href="#" class="list_box list_box_fczs">
				<!-- top -->
				<div class="list_block_top">
					<img src="assets/img/zhanqu/cszt-31.jpg">
				</div>
				<!-- bottom -->
				<div class="list_block_footer">
					<div class="col_top_title f_weight show_a_link zp_title_color">
						是航天服啊啊</div>
					<div class="col_bottom_text">
						阿巴阿巴阿巴阿巴河南省科技馆科技知识普阿巴阿巴阿巴阿巴河南省科技馆科技知识普及展览开始啦及展览开始啦</div>
				</div>
			</a>
			<!-- box -->
			<a href="#" class="list_box list_box_fczs">
				<!-- top -->
				<div class="list_block_top">
					<img src="assets/img/zhanqu/cszt-32.jpg">
				</div>
				<!-- bottom -->
				<div class="list_block_footer">
					<div class="col_top_title f_weight show_a_link zp_title_color">航天服
					</div>
					<div class="col_bottom_text">
						阿巴阿巴阿巴阿巴河南省科技馆科技知识普阿巴阿巴阿巴阿巴河南省科技馆科技知识普及展览开始啦及展览开始啦</div>
				</div>
			</a>
			<!-- box -->
			<a href="#" class="list_box list_box_fczs">
				<!-- top -->
				<div class="list_block_top">
					<img src="assets/img/zhanqu/cszt-29.jpg">
				</div>
				<!-- bottom -->
				<div class="list_block_footer">
					<div class="col_top_title f_weight show_a_link zp_title_color">航天服
					</div>
					<div class="col_bottom_text">
						阿巴阿巴阿巴阿巴河南省科技馆科技知识普阿巴阿巴阿巴阿巴河南省科技馆科技知识普及展览开始啦及展览开始啦</div>
				</div>
			</a>
		</div>
	</div>

Css

	@media (min-width:1401px) {
		.content_left {
			width: 10%;
		}
		
		.content_right {
			width: 90%;
		}
	}
	
	@media (max-width:1400px) {
		.content_left {
			width: 13%;
		}
		
		.content_right {
			width: 87%;
		}
	}
	
	@media (max-width:1175px) {
		.content_left {
			width: 15%;
		}
		
		.content_right {
			width: 85%;
		}
	}
	
	@media (max-width:992px) {
		.content_left {
			width: 18%;
		}
		
		.content_right {
			width: 82%;
		}
	}
	
	.content_right .B1{
		font-size: 120%;
		color: #3487ff;
	}
	
	.content_right .nr{
		line-height: 26px;
		padding-right: 5px;
	}
	
	
	
	.big_title_content{
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		background: #f5f5f5;
		padding: 20px;
		/* //border-left: 10px solid #f5b659;
		
		box-sizing: border-box;
		//-webkit-box-sizing: border-box;
		//-moz-box-sizing: border-box;
		//-ms-box-sizing: border-box;
		//-o-box-sizing: border-box;
		//margin-bottom: 40px; */
	}
	
	
	
	/* 设计研究室部分 */
	.secondary_zp_B1 {
		margin-top: 5px;
		width: 100%;
	}
	
	.content_B1 {
		width: 100%;
	}
	
	.content_top_B1 {
		width: 100%;
		height: 140px;
		/* margin: 1px 1px 2px 1px; */
		background: #f5f5f5;
		position: relative;
		overflow: hidden;
	}
	
	.content_top_B1 .content_yhy_B1 {
		position: absolute;
		top: 20px;
		left: 15px;
	}
	
	.content_top_B1 .zy_B1 {
		font-size: 120%;
		top: 16px;
		position: absolute;
		left: 105px;
		color: #3487ff;
		line-height: 30px;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.content_top_B1 .nr {
		top: 49px;
		position: absolute;
		left: 105px;
		line-height: 30px;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		font-size: 100%;
	}
	
	@media (max-width:1399.0px) {
		.a-progress {
			width: 67%;
		}
	}
	
	@media (max-width: 1200px) {
		.a-progress {
			width: 60%;
		}
	}
	
	@media (max-width: 992px) {
		.a-progress {
			width: 53%;
		}
	}
	
	@media (max-width: 768px) {
		.a-progress {
			width: 60%;
		}
	}
	
	@media (max-width: 600px) {
		.a-progress {
			width: 52%;
		}
	}
	
	@media (max-width: 480px) {
		.a-progress {
			width: 30%;
		}
	}
	
	/* 语音部分 */
	.a-progress .pgs-total {
		width: 100%;
		height: 4px;
		background-color: #060a19;
		border-radius: 10px;
		position: relative;
		top: 6px;
	}

	.a-progress .pgs-total:after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 7px;
		bottom: 7px;
		background-color: #000000;
		border-radius: 10px;
		z-index: -1;
	}

	.a-progress .pgs-total .pgs-play {
		height: 100%;
		position: relative;
		border-radius: 10px;
		background-color: #00a0e9;
	}

	.a-progress .pgs-total .pgs-play:before {
		content: '';
		position: absolute;
		top: 7px;
		bottom: 7px;
		left: 0;
		right: 0;
		background-color: #3fcccc;
		border-radius: 10px;
		z-index: 1;
	}

	.pgs-explain .explain_language {
		color: #FFFFFF;
		/* height: ; */
	}

	.pgs-explain {
		position: absolute;
		left: 100px;
		top: 10px;
	}

	.audio-box {
		width: 100%;
		height: 80px;
		margin: 20px 0px;
		background-color: #17222f;
		justify-content: space-between;
		display: flex;
		align-items: center;
		position: relative;
	}

	.audio-box .play-pause {
		border: 0;
		outline: 0;
		padding: 0;
		width: 30px;
		height: 30px;
		margin: 20px;
		background-color: #17222f;
	}

	.audio-box .play-pause .icon-btn {
		display: inline-block;
		width: 100%;
		height: 100%;
	}

	.audio-box .play-pause .icon-play {
		background: url(assets/img/details/aboutUs/siteMap/audio/stop.png);
		background-size: 100% 100%;
	}

	.audio-box .play-pause .icon-pause {
		background: url(assets/img/details/aboutUs/siteMap/audio/play.png);
		background-size: 100% 100%;
	}

	.audio-box .skip-ward {
		width: 30px;
		height: 30px;
		position: absolute;
		top: 50%;
		margin-top: -15px;
	}

	.audio-box .s-left {
		left: 15px;
		background: url("../images/s-left.png");
		background-size: 100% 100%;
	}

	.audio-box .s-right {
		right: 15px;
		background: url("../images/s-right.png");
		background-size: 100% 100%;
	}

	.audio-box .time-box {
		width: 130px;
		color: #FFFFFF;
	}

	.a-progress {
		width: 75%;
	}

	.secondary_right_item {
		background-color: #f5f5f5;
		text-align: center;
	}

Js

var audioBoxs = $(".audio-box");
	console.log(audioBoxs);
	for(i = 0; i < audioBoxs.length; i++) {
		console.log($(audioBoxs[i]).find("audio"))
		console.log($(audioBoxs[i]).find("audio")[0].duration)
		if(Number.isNaN($(audioBoxs[i]).find("audio").duration)) {
			$(audioBoxs[i][0]).css("display", "none");
		}
	}
	
	
	//如：根据4D影院得到下标
	function onAudio(obj) {
		var audios = document.getElementsByTagName("audio");
		for(i = 0; i < audios.length; i++) {
			audios[i].pause();
			$('.icon-btn').removeClass('icon-pause').addClass('icon-play');
		}
		
		var index = $(obj).parent().index();
		var items = $(obj).parent().attr("class");
		var dl_item = $("."+items)[index];
		
		
		var audio = $(dl_item).parent().parent().find(".zp_list:eq(" + index + ")").find("#audioTag")[0];
		console.log(audio);
		
		var audioTime = $(audio).parent().find("#audioTime")[0];
		
		if (audio == null) {
			return 0;
		}
		
		//获取音乐时长
		let musicDom = audio; // 获取AudioDom节点
		musicDom.load(); //因为source标签不能直接更改路径，所以整个audio标签必须重新加载一次
		musicDom.oncanplay = function() {
			console.log("音乐时长总", musicDom.duration); //音乐总时长
			//处理时长
			var time = musicDom.duration;
			//分钟
			var minute = time / 60;
			var minutes = parseInt(minute);
			if (minutes < 10) {
				minutes = "0" + minutes;
			}
			//秒
			var second = time % 60;
			var seconds = Math.round(second);
			if (seconds < 10) {
				seconds = "0" + seconds;
			}
			console.log('音乐时长', minutes + "：" + seconds)
			var audioTime = $(this).parent().find("#audioTime")[0];
			$(audioTime).text(minutes + ":" + seconds);
		}
	}
	
	//播放暂停按钮
	$('.play-pause').click(function() {
		let audio = this.nextElementSibling;
		audio.addEventListener('timeupdate', function(){updateProgress(audio);}, false); // 监听音频播放时间并更新进度条
		audio.addEventListener('ended', function(){audioEnded(audio);}, false); // 监听播放完成事件
		// 改变暂停/播放icon
		if (audio.paused) {
			audio.play();
			$('.icon-btn').removeClass('icon-play').addClass('icon-pause');
		} else {
			audio.pause();
			$('.icon-btn').removeClass('icon-pause').addClass('icon-play');
		}
	})
	
	//获取音乐时长
	let musicDom = document.getElementsByTagName('audio')[0]; // 获取AudioDom节点
	musicDom.load(); //因为source标签不能直接更改路径，所以整个audio标签必须重新加载一次
	musicDom.oncanplay = function() {
		//console.log("音乐时长总", musicDom.duration); //音乐总时长
		//处理时长
		var time = musicDom.duration;
		//分钟
		var minute = time / 60;
		var minutes = parseInt(minute);
		if (minutes < 10) {
			minutes = "0" + minutes;
		}
		//秒
		var second = time % 60;
		var seconds = Math.round(second);
		if (seconds < 10) {
			seconds = "0" + seconds;
		}
		//console.log('音乐时长', minutes + "：" + seconds)
	}
	
	$('#audioTag').on("loadedmetadata", function() {
		$('#audioTime').text(transTime(this.duration));
		/* $(document).on('touchend', '.pgs-total', function(e) {
			var x = e.originalEvent.changedTouches[0].clientX - this.offsetLeft;
			var X = x < 0 ? 0 : x;
			var W = $(this).width();
			var place = X > W ? W : X;
			audio.currentTime = (place / W) * audio.duration;
			$(this).children().css({
				width: (place / W) * 100 + "%"
			});
			updateProgress(this);
		}); */
	});
	
	// 转换音频时长显示
	function transTime(time) {
		var duration = parseInt(time);
		var minute = parseInt(duration / 60);
		var sec = duration % 60 + '';
		var isM0 = ':';
		if (minute == 0) {
			minute = '00';
		} else if (minute < 10) {
			minute = '0' + minute;
		}
		if (sec.length == 1) {
			sec = '0' + sec;
		}
		return minute + isM0 + sec
	}
	
	
	//更新进度条
	function updateProgress(audio) {
		let progressId = audio.nextElementSibling.nextElementSibling.firstElementChild.firstElementChild;
		let playedTimeId = audio.nextElementSibling.nextElementSibling.nextElementSibling.firstElementChild;
		
		if(audio.currentTime == 0) {
			progressId.style.width = "1%";
			playedTimeId.innerHTML = "00:00";
		} else {
			let playedTimeId = audio.nextElementSibling.nextElementSibling.nextElementSibling.firstElementChild;
			var value = Math.round((Math.floor(audio.currentTime) / Math.floor(audio.duration)) * 100, 0);
			progressId.style.width = value * 1 + '%';
			playedTimeId.innerHTML = "" + transTime(audio.currentTime);
		}
	}
	
	//播放完成
	function audioEnded(audio) {
		audio.currentTime = 0;
		audio.pause();
		$(audio).prev().find("span").removeClass('icon-pause').addClass('icon-play');
	}

One_Piece111

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML音频audio重构样式以及实现

实现样式：设计思路根据点击的区域来加载音频，每次先停止其他音频播放，根据当前的下标来找到类名，对应着进行音频的操作。Html<div class="secondary_right_item" style="text-align: justify;"> <div class="item-box">  <div class="dl_item"> <img class="img disappear_img" src="
复制链接

扫一扫