audio 音频标签的使用及实例

audio 音频标签的使用

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	如果出现该属性，则音频输出为静音。
preload	auto metadata none	规定当网页加载时，音频是否默认被加载以及如何被加载。
src	URL	规定音频文件的 URL。

全局属性

<audio> 标签支持 HTML 的全局属性。https://www.runoob.com/tags/ref-standardattributes.html

事件属性

<audio> 标签支持 HTML 的事件属性。详细见 https://www.runoob.com/tags/ref-eventattributes.html

实例

点击图片点击按钮实现播放暂停

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.musicDiv{width:150px;height: 150px;background-image: url('./img/1.jpg');background-size: cover;/* `cover` 填充整个背景 */border-radius: 75px;animation: musicDiv 15s linear infinite;animation-play-state: paused;/* 定义默认动画是否执行 暂停 */}@keyframes musicDiv {from{transform: rotateZ(0deg);}to{transform: rotateZ(360deg);}}</style>
</head>
<body><div class="musicDiv" onclick="controlMusic()"></div><audio src="./其实都没有.mp3" controls  id="music" onplay="onplayMusic()" onpause="onpauseMusic()"></audio><dl><dt>属性</dt><dd>controls 控制音频的播放暂停</dd><dt>事件</dt><dd>onplay事件代表播放</dd><dd>onpause事件代表暂停</dd><dt>方法</dt><dd>play方法代表播放</dd><dd>pause()方法代表暂停</dd></dl><script>var music = document.querySelector("#music");//音乐播放动画跟着播放var musicDiv =document.querySelector(".musicDiv");//音乐暂停function onpauseMusic(){//animation-play-state转为js时去掉中间的——后面单词首字母大写musicDiv.style.animationPlayState="paused";}//音乐播放function onplayMusic(){musicDiv.style.animationPlayState="running";}function controlMusic(){//如果音乐是暂停的，点击则播放，如果是播放的则暂停if(music.paused){music.play();}else{music.paused();}}</script>
</body>
</html>

扩充使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>音频标签的使用</title><style>.musicDiv{width: 150px;height: 150px;background-image: url('./img/music-img.jpg');background-size: cover;border-radius: 75px;animation: musicPlay 15s linear infinite;/* 定义动画默认是否执行   暂停*/animation-play-state: paused;}@keyframes musicPlay{from{transform: rotateZ(0deg);}to{transform: rotateZ(360deg);}}#musicTime{width: 200px;}</style>
</head>
<body><div class="musicDiv" onclick="controlMusic()"></div><div id="controls"><button type="button" id="btnPlay" onclick="playMusic()">播放</button><button type="button" id="btnPlay" onclick="pauseMusic()">暂停</button><label for="musicTime">播放进度：</label><input type="range" id="musicTime" onchange="controlsMusicTime(this)" min="0" max="100" value="0"><label for="musicVolume">音量：</label><input type="range" id="musicVolume" onchange="controlsMusicVolume(this)" step="0.05" min="0" max="1" value="1"></div><audio src="./其实都没有.mp3" id="music" controls ontimeupdate="onMusicTimeUpdate()" onplay="onplayMusic()" onpause="onpauseMusic()"></audio><script>var music = document.querySelector("#music");// 音乐播放，动画跟着播放// 音乐暂停，动画跟着暂停var musicDiv = document.querySelector(".musicDiv");// 分别写两个方法 用来控制播放和暂停// ------------音乐播放----------function onplayMusic(){// animation-play-state 转为js写法时，去掉中间的线，后面单词首字母大写  runningmusicDiv.style.animationPlayState="running";}// ------------音乐暂停----------function onpauseMusic(){musicDiv.style.animationPlayState="paused";}// 通过图片点击控制音乐播放function controlMusic(){// 如果音乐是暂停的，则播放，如果音乐是播放的，则暂停if(music.paused){music.play();}else{music.pause();}}// 这个方法用来播放音乐function playMusic(){music.play();}// 这个方法用来暂停音乐function pauseMusic(){music.pause();}// 音乐播放改变进度条// currentTime 播放进度// duration  播放时间function onMusicTimeUpdate(){musicTime.value=(music.currentTime/music.duration)*100;// 通过时间比获取到进度条的值}// 控制音量function controlsMusicVolume(obj){music.volume=obj.value;}// 改变音乐的播放进度function controlsMusicTime(obj){music.currentTime=obj.value/100*music.duration;}</script>
</body>
</html>

audio 音频标签的使用及实例相关推荐

20230410----重返学习-网易云音乐首页案例-audio音频标签
day-046-forty-six-20230410-网易云音乐首页案例-audio音频标签网易云音乐首页案例单例设计模式 const theModule = (function(){let th ...
html5前端Video视频标签和audio音频标签的使用
html5前端Video视频标签和audio音频标签的使用 h5新特性中关于Video视频标签和audio音频标签的使用和浅谈一.Video视频标签 video标签是h5新特性中用来播放视频的控件, ...
H5 audio 音频标签自定义样式修改以及添加播放控制事件
20181023 更新原来的代码拖动进度点只写了mouse事件,手机端的话应该是touch事件.所以出现了有朋友说的移动端无法拖动进度条的问题.现在更新的代码已经加上touch事件,即无论是手机模式 ...
微信小程序html5音频,微信小程序 audio音频播放详解及实例
loop:是否循环播放 id:标注唯一组件以this.audioCtx = wx.createAudioContext('myAudio')获取控制组件的对象. bindplay:播放时触发该事件 b ...
解决audio音频标签在ios系统上失效的办法
这周做了一个h5页面,其中用到了audio标签播放背景音乐,一开始皆大欢喜,在自己的安卓机测完后准备发版的时候想了想还是找个苹果看一下把,果然,一看就出现问题了,背景音乐无法播放,而且自定义的播放按钮 ...
前台页面HTML5的Audio音频标签学习使用
原文链接:http://caibaojian.com/html5-audio.html HTML5中的新元素标签 src:音频文件路径. autobuffer:设置是否在页面加载时自动缓冲音频. au ...
视频标签- video 音频标签- audio
基本使用当前元素支持三种视频格式: 尽量使用 mp4格式使用语法: <video src="media/mi.mp4"></video> 属性很多,有一 ...
audio 定义音频标签
audio 定义音频标签支持三种格式的音频文件 wav mp3 ogg src="引入音频文件的路径" autoplay="autoplay" 自动播放,谷歌 ...
HTML5音频标签audio无法播放的问题
HTML5音频标签无法播放的问题先说下audio标签的一些属性属性值描述 autoplay autoplay 如果出现该属性,则音频在就绪后马上播放. controls controls 如果 ...

audio 音频标签的使用及实例

audio 音频标签的使用

全局属性

事件属性

实例

audio 音频标签的使用及实例相关推荐

最新文章

热门文章

audio 音频标签的使用 及实例

audio 音频标签的使用

全局属性

事件属性

实例

audio 音频标签的使用 及实例相关推荐

最新文章

热门文章

audio 音频标签的使用及实例

audio 音频标签的使用及实例相关推荐