千家信息网

HTML5 audio标签使用js进行播放控制实例

发表于:2024-09-22 作者:千家信息网编辑
千家信息网最后更新 2024年09月22日,这篇文章主要为大家分析了HTML5 audio标签使用js进行播放控制实例的相关知识点,内容详细易懂,操作细节合理,具有一定参考价值。如果感兴趣的话,不妨跟着跟随小编一起来看看,下面跟着小编一起深入学
千家信息网最后更新 2024年09月22日HTML5 audio标签使用js进行播放控制实例

这篇文章主要为大家分析了HTML5 audio标签使用js进行播放控制实例的相关知识点,内容详细易懂,操作细节合理,具有一定参考价值。如果感兴趣的话,不妨跟着跟随小编一起来看看,下面跟着小编一起深入学习"HTML5 audio标签使用js进行播放控制实例"的知识吧。

这里我们可以使用JS来进行控制。

代码如下:

var audio ;_window.onload = function(){initAudio();}var initAudio = function(){//audio = document.createElement("audio")//audio.src='Never Say Good Bye.ogg'audio = document.getElementById('audio');}function getCurrentTime(id){alert(parseInt(audio.currentTime) + ':秒');} function playOrPaused(id,obj){if(audio.paused){audio.play();obj[xss_clean]='暂停';return;}audio.pause();obj[xss_clean]='播放';} function hideOrShowControls(id,obj){if(audio.controls){audio.removeAttribute('controls');obj[xss_clean] = '显示控制框'return;}audio.controls = 'controls';obj[xss_clean] = '隐藏控制框'return;}function vol(id,type , obj){if(type == 'up'){var volume = audio.volume + 0.1;if(volume >=1 ){volume = 1 ; }audio.volume = volume;}else if(type == 'down'){var volume = audio.volume - 0.1;if(volume <=0 ){volume = 0 ;}audio.volume = volume;}document.getElementById('nowVol')[xss_clean] = returnFloat1(audio.volume);}function muted(id,obj){if(audio.muted){audio.muted = false;obj[xss_clean] = '开启静音';}else{audio.muted = true;obj[xss_clean] = '关闭静音';}}//保留一位小数点 function returnFloat1(value) {value = Math.round(parseFloat(value) * 10) / 10;if (value.toString().indexOf(".") < 0){value = value.toString() + ".0";}return value;}

调用方式如下:

代码如下:

获取播放时间播放隐藏控制框开启静音音量

当前音量: -

html有什么特点

1、简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便,适合初学前端开发者使用。 2、可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。 3、平台无关性:超级文本标记语言能够在广泛的平台上使用,这也是万维网盛行的一个原因。 4、通用性:HTML是网络的通用语言,它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。

关于"HTML5 audio标签使用js进行播放控制实例"就介绍到这了,更多相关内容可以搜索以前的文章,希望能够帮助大家答疑解惑,请多多支持网站!

0