600字范文 > 前台页面HTML5的Audio音频标签学习使用

前台页面HTML5的Audio音频标签学习使用

时间：2019-02-04 16:39:25

原文链接：/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> <div class='PanelRight'><div class='Prev'><span class='icon glyphicon-step-backward'></span></div> <div id='Play' class='Play'><span class='icon glyphicon-play'></span></div> <div class='Next'><span class='icon glyphicon-step-forward'></span></div> <div class="Song"><span class='SongAuthor'>Greyson Chance</span></br><span class='SongName'>Summertrain</span></div> <div class="Process"> <div class="ProcessAll" ></div> <div class="ProcessNow"></div> <div class="SongTime">00:00 | 00:00</div> </div> </div> </div> </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

附录：