H5学习之路之audio音频播放

为什么突然写这个呢？很简单，H5学习本身应该是一个系统的学习过程，虽然很多的东西都是会的，但是没有总结过，也不知道自己究竟对H5了解多少，爱有多深，所以在这里装作自己好像对H5很了解的样子，写一个记录性质的博文。进行一次系统的总结和学习。

今天学习的是audio音频播放的属性

我们都知道，其实在H5之前是没有只在网页上播放音频的标准的，之前大多数的解决办法是运用Flash，甚至是一直用来很长的一段时间，直到H5的出现，基本上定了网页播放音频的标准-audio

支持的格式：Ogg、MP3、Wav

对网页的支持情况是这样的：

（摘自W3cshool）

具体怎么使用呢？

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><audio src="music/胡夏 - 同桌的你.mp3" controls="controls" loop="loop" autoplay="autoplay"></audio></body>
</html>

这里我用了三个属性：controls、loop、autoplay

我分别说一下：

controls（控制插件）使用的话就是需要显示插件，不使用的话不显示，效果是这样的：

那就有人说了，不显示我怎么播放呢？也是可以的，如果您不写这个显示插件的属性，可以设置我下面要说的属性

autoplay（加载页面播放）不管有没有显示播放的按钮，只要设置这个属性，进入页面就会播放

loop（自动循环播放）不做赘述

这三个属性的默认值都是它本身。

H5学习之路之audio音频播放相关推荐

html5 audio音频播放全解析
html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash 意思是当你没有给浏 ...
audio音频播放标签样式优化自定义
自定义audio音频播放样式实现进度监听,这是效果图 v-audio.vue <template><!-- audio音频组件 src:音频路径 longTime:音频时长, sou ...
html5 audio音频播放器
html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash 意思是当你没有给浏 ...
html audio播放本地语音文件,HTML5+ - audio音频播放及网络音频文件播放
1.介绍常用方法 createPlayer()创建音频对象 play: 开始播放音频 pause: 暂停播放音频 resume: 恢复播放音频 stop: 停止播放音频 seekTo: 跳到指定位置播 ...
Html5添加audio音频播放器插件教程
2019独角兽企业重金招聘Python工程师标准>>> 一.方法: 使用Material design风格音频播放器插件需要引入jQuery和jaudio.min.js. <s ...
html5 仿微信语音播放器,Material design风格HTML5 audio音频播放器
jAudio.js是一款基于HTML5 audio的Material design风格音频播放器jQuery插件.该音频播放器可以设置音频播放列表,每首曲子的封面,标题等,还可以控制歌曲的播放和快进, ...
audioContext audio 音频播放
目的:通过对 audio 和 audioContext 的使用,加深对音频的处理使用标签播放音频使用 AudioContext 对象播放音频 <进阶>通过 AudioContext ...
html 语音播放插件,Html5添加audio音频播放器插件教程
一.方法: 使用Material design风格音频播放器插件需要引入jQuery和jaudio.min.js. 二.HTML结构 00:00 00:00 三.CSS样式下面是该音频播放器的主要C ...
微信小程序html5音频,微信小程序 audio音频播放详解及实例
loop:是否循环播放 id:标注唯一组件以this.audioCtx = wx.createAudioContext('myAudio')获取控制组件的对象. bindplay:播放时触发该事件 b ...

H5学习之路之audio音频播放

H5学习之路之audio音频播放相关推荐

最新文章

热门文章