HTML5之Audio音频标签学习

HTML5中的新元素标签

  1. src：音频文件路径。
  2. autobuffer：设置是否在页面加载时自动缓冲音频。
  3. autoplay：设置音频是否自动播放。
  4. loop：设置音频是否要循环播放。
  5. controls：属性供添加播放、暂停和音量控件。

这些属性和<video>元素标签的属性很类似

如何工作

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

同样 <audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的：

<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>

常用的控制函数：

  1. load()：加载音频、视频软件
  2. play()：加载并播放音频、视频文件或重新播放暂停的的音频、视频
  3. pause()：暂停出于播放状态的音频、视频文件
  4. canPlayType(obj)：测试是否支持给定的Mini类型的文件

只读的媒体属性：

  1. duration获取媒体文件的播放时长，以s为单位，如果无法获取，则为NaN
  2. paused如果媒体文件被暂停，则返回true，否则返回false
  3. ended如果媒体文件播放完毕，则返回true
  4. startTime返回起始播放时间
  5. error返回错误代码
  6. currentSrc以字符串形式返回正在播放或已加载的文件

可脚本控制的属性值：

  1. autoplay：自动播放已经加载的的媒体文件
  2. loop为true：的时候则设定为自动播放
  3. currentTime：以s为单位返回从开始播放到目前所花的时间
  4. controls：显示或者隐藏用户控制界面
  5. volume：音量值,从0.0至1.0之间
  6. muted：设置是否静音
  7. autobuffer：是否进行缓冲加载

"我"的成长独白 ESTELLE‘S AUDIO PLAYER

首先，先介绍一下"我"自己，和你一样，我也是有生命的个体，但 (ke) 是 (xi) ，我比你更有灵性 [ 傲娇 ]

audio.html

<body>

<audio id=‘audio‘>你的浏览器不支持喔！</audio>

<div class=‘MusicPanel‘>
<div class=‘PanelLeft‘><div class=‘circle‘><span class=‘icon glyphicon-heart‘></span></div></div> <!-- Like Button -->

<div class=‘PanelRight‘>
<div class=‘Prev‘><span class=‘icon glyphicon-step-backward‘></span></div> <!-- Prev Song Button -->
<div id=‘Play‘ class=‘Play‘><span class=‘icon glyphicon-play‘></span></div> <!-- Play & Pause Button -->
<div class=‘Next‘><span class=‘icon glyphicon-step-forward‘></span></div> <!-- Next Song Button -->
<div class="Song"><span class=‘SongAuthor‘>Greyson Chance</span></br><span class=‘SongName‘>Summertrain</span></div> <!-- Song Title -->

<div class="Process"> <!-- Process -->
<div class="ProcessAll" ></div> <!-- ProcessAll -->
<div class="ProcessNow"></div> <!-- ProcessNow -->
<div class="SongTime">00:00&nbsp;|&nbsp;00:00</div> <!-- Time -->
</div> <!-- Process End -->
</div> <!-- PanelRight End -->
</div> <!-- MusicPanel End -->

</body>

进度条逻辑

绘制两条重叠的进度条，一条指示总进度 ProcessAll，另一条指示已播放的进度 ProcessNow
根据已播放的时间占总时间比，设置 ProcessNow 下 Width 的值，根据CSS的层叠规范，后写的 ProcessNow 的颜色层在最高层

详见 audio.JS 函数 TimeSpan()

其次，我不能不穿衣服呀，我需要一件合适的袈裟，人见人爱，花见花开，车见车那啥儿，嘿嘿

audio.css

.MusicPanel{
    width: 400px;
    height: 100px;
    margin: 0 auto;
    border:1px solid #76dba3;
}
.MusicPanel .PanelLeft{
    width: 100px;
    height: 100px;
    display: inline-block;
    text-align: center;
    background: #76dba3;
}
.MusicPanel .PanelRight{
    width: 260px;
    height: 80px;
    display: inline-block;
    padding: 10px 20px;
    position: absolute;
    background: #fdfef6;
}
.Prev,.Play,.Next{
    display: inline-block;
    margin-right: 5px;
}
.Prev,.Next{
    filter:alpha(opacity=30);
    -moz-opacity:0.3;
    opacity:0.3;
    cursor: not-allowed;
}
.Prev:hover,.Next:hover{
    filter:alpha(opacity=30);
    -moz-opacity:0.3;
    opacity:0.3;
    cursor: not-allowed;
}
.Song{
    display: inline-block;
    padding-left: 15px;
}
.SongTime{
    float: right;
    font-family: cursive,microsoft Yahei;
    font-size: 14px;
    color:#ee8a87;
}
.Song:hover{
    cursor: default;
}
.SongAuthor{
    font-family: cursive,microsoft Yahei;
    color:#ee8a87;
    font-size: 18px;
}
.SongName{
    font-family: cursive,microsoft Yahei;
    color:#ee8a87;
    font-size: 13px;
}
.PanelRight .icon{
    display: inline-block;
    color:#f06d6a;
    font-size:22px;
    transition:0.3s;
}
.PanelRight .Play .icon:hover {
    cursor: pointer;
    color: #dd2924;
}

.PanelLeft .circle{
    width: 40px;
    height: 40px;
    display: inline-block;
    margin-top: 30%;
    line-height: 40px;
    border-radius: 50%;
    border:1px solid white;
    transition:0.3s;
}
.icon{
    font-family: "Glyphicons Halflings";
}
.circle span{
    color:white;
    font-size: 14px;
    transition:0.05s;
}
.circle:hover{
    cursor: pointer;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.6), 0px 2px 10px 0px rgba(0, 0, 0, 0.4);
    background: #f06d6a;
    border:1px solid #f06d6a;
}
.circle:hover span{
    font-size: 18px;
}
.Process{
    margin-top: 15px;
}
.ProcessAll{
    width: 260px;
    float: left;
    height: 3px;
    cursor: pointer;
    background-color:rgba(0,0,0,0.2);
}
.ProcessNow{
    width: 0px;
    float: left;
    position: absolute;
    height: 3px;
    cursor: pointer;
    background-color:#f06d6a;
}

有了身体，也穿了袈裟，现在的我仍然只是一个空壳，束缚自由，无法行动 [ 想哭 ]
"我" 还需要 js 作为权杖，让我能够行走，或者给我一匹 JQuery，让我能够策马扬鞭，驰骋沙场，很高兴的是，我拥有了后者 [ 骄傲 ]

audio.js

$(document).ready(function() {

    var audio = document.getElementById("audio");
    audio.src = "/demo/summertrain.mp3";

    $("#Play").on(‘click‘,function () {
        if(audio.paused){
            if( $(this).children().hasClass(‘glyphicon-play‘) ) {
                $("#Play").children("span").removeClass("glyphicon-play").addClass("glyphicon-pause");
                Play();
                }
            }
        else{
            $("#Play").children("span").removeClass("glyphicon-pause").addClass("glyphicon-play");
            Pause();
            }
    });// Button cilick

    function Play() {
        audio.play();
        TimeSpan();
    } //Play()

    function Pause() {
        audio.pause();
    } //Pause()

    function TimeSpan() {
        var ProcessNow = 0;
        setInterval(function () {
            var ProcessNow = (audio.currentTime / audio.duration) * 260;
            $(".ProcessNow").css("width", ProcessNow);
            var currentTime = timeFormat(audio.currentTime);
            var timeAll = timeFormat(TimeAll());
            $(".SongTime").html(currentTime + " | " + timeAll);
            }, 1000);
    }  //TimeSpan()

    function timeFormat(number) {
        var minute = parseInt(number / 60);
        var second = parseInt(number % 60);
        minute = minute >= 10 ? minute : "0" + minute;
        second = second >= 10 ? second : "0" + second;
        return minute + ":" + second;
    } //timeFormat()

    function TimeAll() {
        return audio.duration;
    } //TimeAll()

})

"纽扣" ( ICON ) 是定制的Bootstrap，多亏了定制，不然的话得又得重新修补袈裟累成狗 [舒口气]

This is me，sa flowers，papapapa ~

Let‘s Enjoy ：Where did you go

附录：

Audio 对象属性

属性 描述
audioTracks 返回表示可用音频轨道的 AudioTrackList 对象。
autoplay 设置或返回是否在就绪（加载完成）后随即播放音频。
buffered 返回表示音频已缓冲部分的 TimeRanges 对象。
controller 返回表示音频当前媒体控制器的 MediaController 对象。
controls 设置或返回音频是否应该显示控件（比如播放/暂停等）。
crossOrigin 设置或返回音频的 CORS 设置。
currentSrc 返回当前音频的 URL。
currentTime 设置或返回音频中的当前播放位置（以秒计）。
defaultMuted 设置或返回音频默认是否静音。
defaultPlaybackRate 设置或返回音频的默认播放速度。
duration 返回音频的长度（以秒计）。
ended 返回音频的播放是否已结束。
error 返回表示音频错误状态的 MediaError 对象。
loop 设置或返回音频是否应在结束时再次播放。
mediaGroup 设置或返回音频所属媒介组合的名称。
muted 设置或返回是否关闭声音。
networkState 返回音频的当前网络状态。
paused 设置或返回音频是否暂停。
playbackRate 设置或返回音频播放的速度。
played 返回表示音频已播放部分的 TimeRanges 对象。
preload 设置或返回音频的 preload 属性的值。
readyState 返回音频当前的就绪状态。
seekable 返回表示音频可寻址部分的 TimeRanges 对象。
seeking 返回用户当前是否正在音频中进行查找。
src 设置或返回音频的 src 属性的值。
textTracks 返回表示可用文本轨道的 TextTrackList 对象。
volume 设置或返回音频的音量。

Audio 对象方法

方法 描述
addTextTrack() 向音频添加新的文本轨道。
canPlayType() 检查浏览器是否能够播放指定的音频类型。
fastSeek() 在音频播放器中指定播放时间。
getStartDate() 返回新的 Date 对象，表示当前时间线偏移量。
load() 重新加载音频元素。
play() 开始播放音频。
pause() 暂停当前播放的音频。
时间： 2024-11-10 07:47:29

HTML5之Audio音频标签学习的相关文章

HTML5新增的音频标签、视频标签

我们所说的H5就是我们所说的HTML5中新增的语言标准 一.音频标签 在HTML5当中有一个叫做audio的标签,可以直接引入一段音频资源放到我们的网页当中 格式: <audio autoplay controls loop > 降级的文字说明(当音频文件不能本浏览器解析时显示此文字) <source src="格式1路径" > <source src="格式1路径" > ........... </ audio> a

关于HTML5中audio音频播放器的一些理解

最近由于工作需要音频,了解到了HTML5中新兴的audio音频播放器.关于它本身的自带的属性不过多介绍,但是需要着重提到的就是它自身就有play()和pause()两个函数可以拿来直接使用,也就是我们经常遇到的播放和暂停功能.下面是我写的实例,有兴趣的朋友可以下载附件观看.今天晚上能把这个问题搞出来,基本上HTML5中audio的一些常见,常用的需求都可以解决了.开心- <!DOCTYPE HTML> <html> <head> <meta charset=&qu

html5 的&lt;audio&gt; 音频 audio的“坑”

<audio>标签是html5的一个非常有意义的特性.告别的flash的时代.它的属性有: autoplay:音频就绪后马上播放 controls:出现该属性,向用户显示播放的控件. loop:是否在音频结束时候从新播放 preload:如果出现该属性,则在页面加载时候进行加载. src:要播放的音频的URL. 方法有: load():从新加载资源. play():开始播放. pause() :暂停播放. 这些都是基础的知识点.如果我们需要让音频自动播放的时候.在iphone中,我们发现是无法

html5中的一些标签学习总结

html5 contenteditable="true" html5内容可编辑属性 html5 hgroup hgroup字面意思是头部的组,可以将其分拆为h和group来理解.在html5中的作用是用于对网页和区块的标题进行组合.(网页是一个最大的区块,所以可以认为hgroup是区块的标题的组合)前面的文章有提到header元素,貌似这个元素跟hgroup有非常相似的功能,那么它们之间有什么不同呢?继续从hgroup的定义来看,它是对"标题"的组合,html中的标

html5 新增媒体标签详解 &lt;audio&gt;音频 &lt;vedio&gt; 视频 &lt;source&gt; &lt;canvas&gt; 标记定义图片&lt;embed&gt; 标记定义外部可交互内容或者插件 标记定义图片媒体资源

html5 变得更加简洁易用,新增了不少结构标签 比如<article> 标记一篇文章   <header> 定义头部 <footer> 定义底部  <nav> 定义导航  <section> 定义一个区域  <aside> 定义侧边栏 <hgroup> 标记定义文件夹一个区块的相关信息 同时也新增了 <audio><vedio><source>  下面我们就来详细的讲解一下这三个媒体标

HTML5 学习笔记（一）——HTML5概要与新增标签

一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸.不开放). HTML5增强了浏览器的原生功能,符合HTML5规范的浏览器功能将更加强大,减少了Web应用对插件的依赖,让用户体验更好,让开发更加方便,另外W3C从推出HTML4.0到5.0之间共经历了17年,HTML的变化很小,这并不符合一个好产品的演进规则. 1.2.什么是HTML5 HTML5

HTML5 学习总结（一）——HTML5概要与新增标签

目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2.缺点 1.6.HTML5效果展示 1.7.HTML5学习与开发工具 1.7.1.基础要求 1.7.2.开发工具 1.8.HTML5语法规则与文档声明 1.8.1.语法规则 1.8.2.文档声明 1.8.2.文档声明 二.废弃的标签 三.新增的标签 3.1.新增的结构标签 3.2.新增加其它元素 3

HTML5 学习笔记--------》HTML5概要与新增标签！

一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸.不开放). HTML5增强了浏览器的原生功能,符合HTML5规范的浏览器功能将更加强大,减少了Web应用对插件的依赖,让用户体验更好,让开发更加方便,另外W3C从推出HTML4.0到5.0之间共经历了17年,HTML的变化很小,这并不符合一个好产品的演进规则. 1.2.什么是HTML5 HTML5

HTML5 学习总结（一）——HTML5概要与新增标签（转载）

目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2.缺点 1.6.HTML5效果展示 1.7.HTML5学习与开发工具 1.7.1.基础要求 1.7.2.开发工具 1.8.HTML5语法规则与文档声明 1.8.1.语法规则 1.8.2.文档声明 1.8.2.文档声明 二.废弃的标签 三.新增的标签 3.1.新增的结构标签 3.2.新增加其它元素 3