如何使用HTML设计自定义音频播放器
Dan*_*iel 6 html javascript css html5 html5-audio
我有一个音频播放器的布局,我想与HTML音频播放器元素一起使用.
我正在尝试<audio></audio>,它给了我默认播放器:
有没有办法改变播放器的风格来使用我想要使用的布局？
你可以很快地为HTML5音频播放器提供一套非常漂亮的自定义音频控件.使用(主要)基本的HTML和CSS,只需要一些简单的Javascript事件处理.该解决方案是基于所提供设计的全功能定制音频播放器.
完整的代码和示例可以在jsFiddle中找到:https://jsfiddle.net/mgaskill/zo3ede1c/ .点击并随意播放,因为它确实是一个有效的音频播放器.
玩家;选手
播放器包括原始设计中描述的所有元素.您可以在第一张图片中看到这个(并与原始图片进行比较):
此外,我通过提供可折叠的"信息托盘"稍微扩展了设计,通过按下右侧的"更多信息"按钮隐藏和显示.您可以在第二张图片中看到部署的托盘:
当然,颜色不一样,并且可能与原始设计存在像素特定的差异,但它非常接近.我的核心技能不是CSS,所以那里有改进的余地.然而,它非常非常接近原始设计,并保留了该设计的所有精神,布局和功能.
工具
为方便起见,该解决方案使用了一些外部元件.这些是:
- jQuery:因为我通常更喜欢它而不是简单的Javascript
- jQueryUI:用于跟踪进度和音量控制,因为HTML5进度条在某些浏览器上不可用,特别是旧版本的IE和一些移动浏览器
- FontAwesome:用于播放/暂停和音量/静音按钮图形
- 噪音成瘾者免费MP3样本:为辉煌的Semper Fidelis March
HTML
HTML采用将音频控件面板上的每个组件作为单独元素进行处理的方法.HTML布局非常有用,唯一有趣的部分实际上是使用FontAwesome类来实现播放/暂停和音量/静音按钮的初始状态图标.
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<audio id="player">
<source src="http://www.noiseaddicts.com/samples_1w72b820/2543.mp3" type="audio/mpeg" />
</audio>
<div id="audio-player">
<div id="controls">
<i id="play" class="fa fa-pause"></i>
<span id="start-time" class="time">00:00</span>
<div id="progressbar"></div>
<span id="time" class="time">00:00</span>
<i id="mute" class="fa fa-volume-up"></i>
<div id="volume"></div>
</div>
<div id="more-info-box">
<span id="more-info">MORE INFO</span>
</div>
<div id="info-tray">
Track: <span id="track">Semper Fidelis March</span>
</div>
</div>
请注意,整个音频控件都包含在#audio-player元素中.
CSS
CSS赋予HTML生命,在这种情况下,用于提供颜色,位置和操作.
#audio-player {
height: 50px;
width: 500px;
overflow: hidden;
background-color: #2B2B2B;
color: white;
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
#controls {
height: 50px;
background-color: #808080;
width: 350px;
}
.time {
font-size: 10px;
color: white;
position: relative;
top: 14px;
margin: 5px;
}
.ui-progressbar {
background: #2B2B2B;
}
.ui-progressbar-value {
background: white;
}
#progressbar, #volume {
height: 10px;
display: inline-block;
border-radius: 0px;
border: none;
position: relative;
top: 16px;
}
#progressbar {
width: 150px;
}
#play, #mute {
font-size: 16px;
width: 20px;
position: relative;
top: 17px;
}
#play {
margin-left: 15px;
}
#volume {
width: 50px;
}
#more-info-box {
display: inline-block;
width: 150px;
height: 50px;
position: relative;
left: 350px;
top: -50px;
padding-top: 18px;
text-align: center;
font-family: sans-serif;
font-size: 12px;
color: white;
}
#more-info-box, #more-info-box > span {
cursor: context-menu;
}
#info-tray {
display: inline-block;
color: white;
position: relative;
width: 100%;
top: -65px;
height: 50px;
padding: 5px;
}
虽然大部分内容非常简单,但仍有一些有趣的事情发生.
首先,#audio-player样式调用特定于浏览器(但不是全包)的样式来禁用控件的文本选择:
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
使用预定义的类使用条形颜色设置jQueryUI进度条控件的样式:
.ui-progressbar {
background: #2B2B2B;
}
.ui-progressbar-value {
background: white;
}
div通过更改其显示布局,可以正确地进行布局:
display: inline-block;
使用相对定位将控件明确放置在适当的位置:
position: relative;
Javascript
Javascript主要面向处理各种控件和状态的事件.
var audio_player = $("#audio-player");
var play_button = $('#play');
var progress_bar = $("#progressbar");
var time = $("#time");
var mute_button = $('#mute');
var volume_bar = $('#volume');
var more_info = $('#more-info-box');
var info_tray = $("#info-tray");
var player = document.getElementById('player');
var duration = 0;
var volume = 0.75;
player.onloadedmetadata = function() {
duration = player.duration;
progress_bar.progressbar("option", { 'max' : duration });
};
player.load();
player.volume = 0.75;
player.addEventListener("timeupdate", function() {
progress_bar.progressbar('value', player.currentTime);
time.text(getTime(player.currentTime));
}, false);
function getTime(t) {
var m=~~(t/60), s=~~(t % 60);
return (m<10?"0"+m:m)+':'+(s<10?"0"+s:s);
}
function getProgressBarClickInfo(progress_bar, e) {
var offset = progress_bar.position();
var x = e.pageX - offset.left; // or e.offsetX (less support, though)
var y = e.pageY - offset.top; // or e.offsetY
var max = progress_bar.progressbar("option", "max");
var value = x * max / progress_bar.width();
return { x: x, y: y, max: max, value: value };
}
volume_bar.progressbar({
value : player.volume*100,
});
volume_bar.click(function(e) {
var info = getProgressBarClickInfo($(this), e);
volume_bar.progressbar('value', info.value);
player.volume = info.value / info.max;
});
progress_bar.progressbar({
value : player.currentTime,
});
progress_bar.click(function(e) {
var info = getProgressBarClickInfo($(this), e);
player.currentTime = player.duration / info.max * info.value;
});
play_button.click(function() {
player[player.paused ? 'play' : 'pause']();
$(this).toggleClass("fa-play", !player.paused);
$(this).toggleClass("fa-pause", player.paused);
});
mute_button.click(function() {
if (player.volume == 0) {
player.volume = volume;
} else {
volume = player.volume;
player.volume = 0;
}
volume_bar.progressbar('value', player.volume * 100);
$(this).toggleClass("fa-volume-up", player.volume != 0);
$(this).toggleClass("fa-volume-off", player.volume == 0);
});
more_info.click(function() {
audio_player.animate({
height: (audio_player.height() == 50) ? 100 : 50
}, 1000);
});
该onloadedmetadata事件处理程序时使用的音频已经被加载,以识别,以便跟踪进展可以被初始化为音频轨道的长度(持续时间).
该timeupdate事件处理程序被用作音轨播放更新跟踪进展.这允许进度条向右增长以反映音轨中的当前位置.
的volume和progress_bar元件与jQueryUI的进度控制初始化,并且click处理程序被设置为允许用户点击内动态地改变的位置.
该play_button和mute_button处理点击更改播放状态(播放/暂停)或音频状态(开/关音量).这些处理程序动态交换相应的FontAwesome类,以正确反映按钮上的当前状态.
最后,more_info点击处理程序显示/隐藏信息托盘元素.隐藏/显示使用jQuery动画,animate以提供类似立体声组件的感觉,让人想起CD托盘弹出.此外,它为控制器提供了良好的伺服感觉.因为这就是我想要的,除此之外别无他法.
| 归档时间： |
|
| 查看次数： |
6983 次 |
| 最近记录： |