使用语法
<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. JavaScript界面传值与前后台互调

    话说曾在校时,前端的第一门课程HTML静态网页设计,其老师,真是应了他的名字: 路遥知马力. 整个学期硬是全部在 Dreamwear 中进行拖拽控件来教学,未曾教授一句代码.成功忽悠了全体学生,课上一 ...

  2. Java设计模式（三）——观察者模式和监听器

    为了实现多个模块之间的联动,最好的方法是使用观察者模式.网上介绍的资料也比较多,今天我就从另一个方面谈谈自己对观察者模式的理解.从JDK提供的支持库里,我们能够找到四个对象:Observable.Ob ...

  3. 一个被称为世界上最短的判断IE方法

    最近偶然看到一段判断是否为IE浏览器的代码: if(!+[1,]) { console.info("IE 浏览器"); } else { console.info("非 ...

  4. winform label文本转换为图片 、Picturebox+label合并转换为图片

    public Form1() { InitializeComponent(); //label存入Picturebox pictureBox1.Controls.Add(label1); pictur ...

  5. Jquery 下实现 图片大图预览效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  6. STM32F429i-DISCO FreeRTOS keil STM32CubeMX

    目标: 在STM32F429 Disco开发板上用FreeRTOS双线程点亮双闪led. 准备: 0. STM32F429i-DISCO 1. keil ARMMDK 5.13 2. STM32Cub ...

  7. Java SE 简介 & 环境变量的配置

    Java SE 简介 & 环境变量的配置 一.Java 技术的三个方向 Java 技术分为三个方向 javaSE( Java Platform Standard Edition 标准版)用来开 ...

  8. 更新maven库

    删除所在本地仓库的文件夹,例如: 然后,重新下载一个jar包,放到工程的文件夹,注意名字要不同,否则maven库不予更新,替换完成后,点击工程,maven,update project即可,再次查看M ...

  9. [转]RAID基础，RAID10与RAID01比较，RAID10与RAID5比较

    原文:http://blog.itpub.net/787018/viewspace-666280/ 文档内容3部分:1.基本的RAID级别介绍2.RAID10和RAID01的比较3.RAID10和RA ...

  10. sublime text 配置 builder [build system]

    有时候需要用运行一段 PHP 代码,比如测试某个函数返回值等等,如果启动 Http Server,再打开浏览器,那黄花菜都凉了.我们可以在 Sublime Text 3 中创建 PHP 的 build ...