H5audio标签制作音频播放器

最新推荐文章于 2025-06-04 20:00:00 发布

不达意

最新推荐文章于 2025-06-04 20:00:00 发布

阅读量688

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： H5音频标签制作音频播放器 HTML5 js

本文链接：https://blog.youkuaiyun.com/weixin_44434509/article/details/88936308

本文介绍了如何利用HTML5的audio标签和JavaScript实现网页端的音频播放功能，包括自动加载、循环播放、音量控制、播放速度调整以及进度条显示。同时，文章提到了在遇到进度条异常时，采用jquery_nstSlider插件来解决这一问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

公司要在网页端为课程加一个音频播放的功能，H5的audio标签可以满足此功能，并且有丰富的api可供选择，话不多说，直接上代码。

    <audio preload="auto"  id="audio"  onload="true" loop="true">
			<source id="source" src="音频的src" />
	</audio>
	//音频进度条滑块
	<div class="controlPlate2">
		<div class="nstSlider" id="aaa"  data-range_min = "0" data-range_max="770" data-cur_min="0">
			<div id='sss'class="leftGrip"></div>
		</div>
		<div class="leftLabel" /></div>
	//音量条滑块
	<div id="slideTest3" class="demo-slider"></div>

onload代表是否自动加载
loop代表是否循环播放(loop为true或false都会循环，不想循环只有不写loop参数)

  function muted() { 
        audio.muted = !audio.muted;
        audio.muted ?  ins1.setValue(0) :  ins1.setValue(100);
    };

audio的muted属性，返回一个Boolean值,表示当前音频是否静音。

 function play() {
        audio.play();
        $("#playIcon").hide();
        $("#stopIcon").sho

最低0.47元/天解锁文章

200万优质内容无限畅学