H5audio标签制作音频播放器

本文介绍了如何利用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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值