使用语法
<audio src="song.mp3" controls="controls" loop="loop" autoplay="autoplay">亲 您的浏览器不支持html5的audio标签</audio>
属性
src  是歌曲的路径
controls  播放控制 如果给标签里写了 controls="controls" 那么网页会显示audio自带的播放控件，如果没写就不会显示.
loop 歌曲循环 在标签里添加该属性歌曲循环 如果你的歌曲是从后台调取的的 也可以在ajax里设置 loop=true/false来控制;
autoplay 当歌曲加载后自动播放，但是只有pc端可以实现 移动端不行(pc端的浏览器要比移动端的完善很多，对有些属性支持也会好很多)
以上是标签内的属性 当然也可以作为对象属性来调取控制auido.*

audio不单单是个标签 他也是window下的一个对象，对象就有属性和方法，作为对象他有哪些常用的方法呢
对象属性：
currentTime 获取当前播放时间
duration 获取歌曲的总时间
play 是否在播放 返回true/false
pause 是否暂停 返回true/false
对象方法：
play() 播放歌曲
pause() 暂停歌曲
load()重新加载歌曲

html5 audio的语法以及属性和方法的更多相关文章

  1. html5 audio标签切换播放音乐的方法

    html5 audio标签切换播放音乐的方法<pre><audio id="music1" preload loop="loop">&l ...

  2. html5音频和视频相关属性和方法

    方法 方法 描述 addTextTrack() 为音视频加入一个新的文本轨迹 canPlayType() 检查指定的音视频格式是否得到支持 load() 重新加载音视频标签 play() 播放音视频 ...

  3. javascript 简单语法 对象属性及方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. html5 audio音频播放全解析

    序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给 ...

  5. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  6. HTML5 Audio/Video 标签,属性,方法,事件汇总 （转）

    HTML5 Audio/Video 标签,属性,方法,事件   <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...

  7. [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...

  8. HTML5 Audio and Video 的新属性简介

    前言:HTML5 中 Audio and Video的使用方法比较简单,但就是比较复杂,方法属性多.如果不常用的几乎难以记住,甚至有些人难以区分不同属性和方法的作用,更别说应用了.以下对Audio a ...

  9. HTML5 Audio标签方法和函数API介绍

    问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函数 ...

随机推荐

  1. mysql中使用 where 1=1和 0=1 的作用

    操作mysql的时候,经常使用where语句进行查询.当where语句不存在的时候,经常在后面加一个where 1=1 where 1=1; 这个条件始终为True,在不定数量查询条件情况下,1=1可 ...

  2. PhpStorm设置编码

    PhpStorm是一个轻量级且便捷的PHP IDE,其旨在提供用户效率,可深刻理解用户的编码,提供智能代码补全,快速导航以及即时错误检查. 本文为大家讲解的是如何设置phpstorm 编辑器的编码,感 ...

  3. 用js写的极简的导航菜单，带下拉列表

    太简单了,不多说,但是自己还是写了一会,因为总会出现这样那样小的错误,毕境最近在复习和学习一些前台,欢迎看到的各位能给点改进意见或者其它的,Thank you! 首先是发图,只用CSS写了结构,几乎没 ...

  4. 并发框架Disruptor浅析

    1.引言 Disruptor是一个开源的Java框架,它被设计用于在生产者—消费者(producer-consumer problem,简称PCP)问题上获得尽量高的吞吐量(TPS)和尽量低的延迟.D ...

  5. apiCloud又拍云数据库操作经验

    1.在数据库表中有个relation字段,表示一对多(对应其他表的多个记录),这个字段比较奇怪,因为实际上这个字段里并未保存实际值.而是保存在对应表的字段中.但是对应表显示出来并没有这个字段.导出数据 ...

  6. 一次爬虫实践学习(C#)

    我们经常浏览网页,有时候看到一些精美的图片,想下载下来保存,但是太多,如果一张一张的下载,那太费时了:如果你喜欢看书,看小说,那么浏览小说网站是常有的事,但是有时候我们不能联网,比如农村老家,如果还想 ...

  7. nodejs ejs 请求路径和静态资源文件路径

    /XXX 会跳转到  http://域名:端口/XXX ./XXX  会跳转到 当前路径+/XXX XXX(../XXX) 会跳转到 当前路径父级+XXX

  8. 《Spark 官方文档》机器学习库（MLlib）指南

    spark-2.0.2 机器学习库(MLlib)指南 MLlib是Spark的机器学习(ML)库.旨在简化机器学习的工程实践工作,并方便扩展到更大规模.MLlib由一些通用的学习算法和工具组成,包括分 ...

  9. 【转】解决eclipse新导入工程无法run as server

    转载地址:http://blog.csdn.net/huang86411/article/details/12118309 问题描述: 从SVN或者别处搞过来的web项目,利用eclipse工具,新建 ...

  10. Sublime Text 3使用指南（1）——安装package control组件

    按Ctrl+`, 调出console 控制台中粘贴一下代码: import urllib.request,os; pf = 'Package Control.sublime-package'; ipp ...