原文链接:/html5-audio.html
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为单位,如果无法获取,则为NaNpaused如果媒体文件被暂停,则返回true,否则返回falseended如果媒体文件播放完毕,则返回truestartTime返回起始播放时间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
//code from /html5-audio.html.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 cilickfunction 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 对象属性
Audio 对象方法
来源:前端开发博客