<audio>标签:用于在文档中表示音频内容。利用它,你可以在你的个人网站上放一首你喜欢的歌。

    <audio src="music.mp3"></audio>

用法很简单,跟<video>标签一样,属性src指定音频文件地址。

如果你仅仅这样写,页面上不会看到有明显的东西,<audio>标签默认是隐藏的。

对于不支持<audio>标签的浏览器,会把标签的文本内容显示出来。

    <audio src="music.mp3">
        别试了,是你的浏览器渣渣
   </audio>

( 大家都叫我:IE8 )

为了方便我们对音频文件进行控制,操作它的进度、播放暂停、音量等等,我们可以给它添加controls属性:

    <audio src="m.mp3" controls></audio>

用法跟<video>标签一样。对于加上了controls属性, 不同的浏览器会展示不同样式的控制面板。

( chrome浏览器的音频控制面板 )

( firefox浏览器的音频控制面板 )

( IE浏览器的音频控制面板 )

哪个好看就见仁见智了~~

跟<video>标签一样,<audio>标签也有一个字标签:<source>。

它们的作用和用法都一样,就是用来引入多个音频,浏览器会选择一个支持的音频格式进行加载,对于不支持<audio>标签的浏览器,<source>元素也可以作为浏览器不识别的内容加入到文档中。

    <audio>
        <source src="music.mp3">
        <source src="music.ogg">
        <source src="music.wav">
   </audio>

注:主流的音频文件格式有:mp3、wav、ogg。不同的浏览器对三种格式支持程度不一样。其中mp3格式支持度最好。

autoplay属性:加载完成后,自动播放。也非常简单、使用。

   <audio src="m.mp3" autoplay></audio>

loop属性:顾名思义,循环播放。

    <audio src="m.mp3" loop></audio>

preload属性:用来控制音频在什么时候进行加载。

    <audio src="m.mp3" preload="auto"></audio>

对应的值有3种:

  • none:默认不加载,等有需要的时候再加载。

  • metadata:元数据,默认不加载,但是可以提取该音频的元数据信息。

  • auto:自动加载,网页加载完就加载整个音频。

muted属性:静音效果。

    <audio src="m.mp3" muted></audio>

加了muted属性,音频即使在播放的时候,也是没有声音,除非用户手动调整控制面板的音量。

JavaScript控制音频

JavaScript可以通过video对象控制网页视频;同样可以audio对象操作网页音频。

首先我们通过getElementById(ID)方法获取到一个audio对象。假设id为“music“。

    <audio id="music" src="m.mp3"></audio>

    let m = document.getElementById('music');

控制加载:


   m
.load();//加载

如果你的<audio>标签是手动生成的节点,可以用load方法来实现加载。

控制播放:


   m
.play();//播放

调用play( )方法可以执行播放。

控制暂停:


   m
.pause();//暂停

调用pause( )方法可以执行暂停播放。

指定播放时间:


   m
.fastSeek(20);

这样的话,音频会定位到20秒的播放位置。不过目前只有Firefox浏览器支持,你可以通过currentTime属性来实现。

获取和设置已播放的时间


   m
.currentTime

通过currentTime属性,你可以拿到当前音频播放了多久,返回的数字以( s )秒为单位。


   m
.currentTime = 10;

你也可以给它赋值,这样,音频会定位到10秒的播放位置。

是否自动播放:


   m
.autoplay = true;//自动播放

可以直接在<audio>标签上加上autoplay属性,也可以通过JavaScript来设置autoplay属性。它是一个布尔值,true代表自动播放,false代表非自动播放

是否循环播放:


   m
.loop = true;//循环播放

可以直接在<audio>标签上加上loop属性,也可以通过JavaScript来设置loop属性。它也是一个布尔值,true代表循环播放,false代表单曲播放

是否显示控制面板:


   m
.controls = true;//显示控制面板

可以直接在<audio>标签上加上controls属性,也可以通过JavaScript来设置controls属性。它也是一个布尔值,true代表显示控制面板,false代表隐藏控制面板。

是否静音:


   m
.muted = true;//静音

可以直接在<audio>标签上加上muted属性,也可以通过JavaScript来设置muted属性。它也是一个布尔值,true代表静音,false代表有声音

是否暂停:


   m
.paused  //是否暂停

判断音频当前是否暂停,返回true代表暂停,返回false代表正在播放;默认是true;该值只能读取,不能修改。

调用play( )方法后,m.paused的值会变成false;调用pause( )方法后,m.paused的值会变成true。

调节音量:


   m
.volume = 0.1;

音量的取值范围在:0(无声)~1(最大声)之间。可以对volume属性赋合理的值或者做一些运算,来改变音频的音量。

<audio>标签HTML5音乐播放器的更多相关文章

  1. HTML5 audio标签自制音乐播放器

    相关技能 HTML5+CSS3(实现页面布局和动态效果) Iconfont(使用矢量图标库添加播放器相关图标) LESS (动态CSS编写) jQuery(快速编写js脚本) gulp+webpack ...

  2. 4个小时实现一个HTML5音乐播放器

    技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 接下来就步入正题: 要做一个音乐 ...

  3. 用<audio>标签打造一个属于自己的HTML5音乐播放器

    上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如 ...

  4. HTML5项目笔记4:使用Audio API设计绚丽的HTML5音乐播放器

    HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...

  5. 使用Audio API设计绚丽的HTML5音乐播放器

    HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...

  6. jqm视频播放器,html5视频播放器,html5音乐播放器,html5媒体播放器,video开展demo,html5视频播放演示示例,html5移动视频播放器

    最近看到很多有用的论坛html5视频播放的发展,音乐播放功能,大多数都在寻找答案.所以,我在这里做一个demo.对于大家互相学习.html5开发越来越流行,至于这也是一个不可缺少的一部分的视频. 如何 ...

  7. 简约的HTML5音乐播放器插件

    从我刚开始接触前端的时候就想写一个能播放音乐的小程序,刚开始写的时候虽然可以放,但是确实很慢,很卡,有很多可以优化的地方.最近在前一个版本的基础上重写了一个音乐播放器的插件,速度还可以吧 因为追求简约 ...

  8. 一款好看+极简到不行的HTML5音乐播放器-skPlayer

    Demo: github skPlayer在线预览 预览: 单曲循环模式预览: 使用方法: 方式1:NPM npm install skplayer 方式2:引入文件 引入css文件: <lin ...

  9. HTML5音乐播放器(最新升级改造加强版)

    最近么,单位里面么老不顺心的,公司一直催要程序员要PHP,然后本宅好不容易推荐了一个,我日嘞,最后待遇变成1.3,吾师最后也同意1.3W,然后还说要考虑... 尼玛,4年多5年不到一点的工作经验,前端 ...

随机推荐

  1. UVa 401 - Palindromes 解题报告 - C语言

    1.题目大意 输入字符串,判断其是否为回文串或镜像串.其中,输入的字符串中不含0,且全为合法字符.以下为所有的合法字符及其镜像: 2.思路 (1)考虑使用常量数组而不是if或switch来实现对镜像的 ...

  2. iOS开发自定义试图切换

    CATransition *transition = [CATransition animation]; transition.duration = 1.0f; transition.timingFu ...

  3. request.getRequestDispatcher不能实现页面跳转的原因

    我在JS里面写了个Ajax,传值给servlet,然后利用request.getRequestDispatcher(),打算跳转至另外一个页面.但是没有跳转成功,运行之后没反应. 在网上搜了资料发现, ...

  4. 3dContactPointAnnotationTool开发日志(十八)

      今天实现了tab效果,按tab键可以在status面板的各个输入框内来回切换,参考Unity3D - UGUI实现Tab键切换输入框.按钮(按Tab键切换高亮显示的UI)

  5. java-自定义标签&&JSTL标签库详解

    自定义标签是Jav aWeb的一部分非常重要的核心功能,我们之前就说过,JSP规范说的很清楚,就是Jsp页面中禁止编写一行Java代码,就是最好不要有Java脚本片段,下面就来看一下自定义标签的简介: ...

  6. solr 学习之数据导入

    将数据库中的数据导入到我们的solr索引库中(DataImportHandler) 1.将jdbc的jar包和solr包中的DataImport的jar包拷贝到webapp中solr/WEB-INF/ ...

  7. maven Tomcat idea 热部署

    1.首先得有maven项目 2.配置tomcat,可以访问页面管理项目 修改: /conf/tomcat-users.xml <role rolename="manager-gui&q ...

  8. [C/C++] const用法详解

    const在C语言中算是一个比较新的描述符,我们称之为常量修饰符,意即其所修饰的对象为常量(immutable). 我们来分情况看语法上它该如何被使用. 1.函数体内修饰局部变量.例:void fun ...

  9. 【swaggerui】swaggerui在asp.net web api core 中的应用

    Swaggerui 可以为我们的webapi提供美观的在线文档,如下图: 实现步骤: NuGet Packages  Install-Package Swashbuckle.AspNetCore 在s ...

  10. BZOJ 1010 玩具装箱(斜率优化DP)

    dp[i]=min(dp[j]+(sum[i]-sum[j]+i-j-1-L)^2) (j<i) 令f[i]=sum[i]+i,c=1+l 则dp[i]=min(dp[j]+(f[i]-f[j] ...