HTML5中的新元素标签
- src:音频文件路径。
- autobuffer:设置是否在页面加载时自动缓冲音频。
- autoplay:设置音频是否自动播放。
- loop:设置音频是否要循环播放。
- 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>
常用的控制函数:
- load():加载音频、视频软件
- play():加载并播放音频、视频文件或重新播放暂停的的音频、视频
- pause():暂停出于播放状态的音频、视频文件
- canPlayType(obj):测试是否支持给定的Mini类型的文件
只读的媒体属性:
- duration获取媒体文件的播放时长,以s为单位,如果无法获取,则为NaN
- paused如果媒体文件被暂停,则返回true,否则返回false
- ended如果媒体文件播放完毕,则返回true
- startTime返回起始播放时间
- error返回错误代码
- currentSrc以字符串形式返回正在播放或已加载的文件
可脚本控制的属性值:
- autoplay:自动播放已经加载的的媒体文件
- loop为true:的时候则设定为自动播放
- currentTime:以s为单位返回从开始播放到目前所花的时间
- controls:显示或者隐藏用户控制界面
- volume:音量值,从0.0至1.0之间
- muted:设置是否静音
- 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 | 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 | 设置或返回音频的音量。 |
评论前必须登录!
注册