如何使用HTML设计自定义音频播放器 [英] How to design customized audio player with HTML

问题描述

我为音频播放器设计了一个布局，我希望将它用于HTML音频播放器元素。

有什么方法可以改变风格播放器使用我想要使用的布局吗？

解决方案

您可以掀起一组非常漂亮的自定义音频控件对于HTML5音频播放器来说很快。使用（大部分）基本的HTML和CSS，以及一些轻松的Javascript事件处理是所有必需的。该解决方案是基于所提供设计的全功能定制音频播放器。

完整的代码和示例可以在jsFiddle中找到：

另外，我通过提供可折叠的信息托盘稍微扩展了设计，隐藏并通过按下右侧的更多信息按钮显示。您可以在第二张图片中看到部署的托盘：

<当然，颜色并不相同，并且可能与原始设计有像素特定的差异，但它非常接近。我的核心技能不是CSS，所以这里还有改进的空间。但是，它与原始设计非常非常接近，并保留了该设计的所有精神，布局和功能。

工具

为了方便起见，此解决方案使用了一些外部元素。这些是：

• jQuery ：因为我通常比较喜欢使用Javascript


• jQueryUI ：用于跟踪进度和音量控制，因为HTML5的进度条在某些浏览器上不可用，尤其是旧版本的IE和一些移动浏览器。


• FontAwesome ：用于播放/暂停和音量/静音按钮图形


• Noise Addicts免费MP3样本：精彩的 Semper Fidelis March

HTML

HTML采用将音频控制面板上的每个组件作为单独元素处理的方法。 HTML布局非常流行，唯一有趣的部分是使用FontAwesome类来实现播放/暂停和音量/静音按钮的初始状态图标。

 < link href =http://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css =stylesheet /> 
< link href =https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css =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.mp3type =audio / mpeg/> 
< / audio> 
 
< div id =audio-player> 
< div id =controls> 
< i id =playclass =fa fa-pause>< / i> 
< span id =start-timeclass =time> 00：00< / span> 
< div id =progressbar>< / div> 
< span id =timeclass =time> 00：00< / span> 
< i id =muteclass =fa fa-volume-up>< / i> 
< div id =volume>< / div> 
< / div> 
< div id =more-info-box> 
< span id =more-info>更多信息< / span> 
< / div> 
< div id =info-tray> 
曲目：< span id =track> Semper Fidelis March< / span> 
< / div> 
< / div> 
  

请注意，整个音频控件都包含在＃audio- player 元素

CSS

CSS赋予HTML，在这种情况下，用于提供颜色，放置和操作。

 ＃audio-player {
 height ：50px; 
 width：500px; 
 overflow：hidden; 
背景颜色：＃2B2B2B; 
颜色：白色; 
 -webkit-user-select：none; / * webkit（safari，chrome）浏览器* / 
 -moz-user-select：none; / * mozilla浏览器* / 
 -khtml-user-select：none; / * webkit（konqueror）浏览器* / 
 -ms-user-select：none; / * IE10 + * / 
} 
 
 #controls {
 height：50px; 
背景颜色：＃808080; 
 width：350px; 
} 
 
 .time {
 font-size：10px; 
颜色：白色; 
职位：亲属; 
 top：14px; 
 margin：5px; 
} 
 
 .ui-progressbar {
背景：＃2B2B2B; 
} 
 
 .ui-progressbar-value {
 background：white; 
} 
 
 #progressbar，#volume {
 height：10px; 
 display：inline-block; 
 border-radius：0px; 
 border：none; 
职位：亲属; 
 top：16px; 
} 
 
 #progressbar {
 width：150px; 
} 
 
 #play，#mute {
 font-size：16px; 
 width：20px; 
职位：亲属; 
 top：17px; 
} 
 
 #play {
 margin-left：15px; 
} 
 
 #volume {
 width：50px; 
} 
 
＃more-info-box {
 display：inline-block; 
 width：150px; 
 height：50px; 
职位：亲属; 
 left：350px; 
 top：-50px; 
 padding-top：18px; 
 text-align：center; 
 font-family：sans-serif; 
 font-size：12px; 
颜色：白色; 
} 
 
＃more-info-box，＃more-info-box> span {
 cursor：context-menu; 
} 
 
＃info-tray {
 display：inline-block; 
颜色：白色; 
职位：亲属; 
宽度：100％; 
 top：-65px; 
 height：50px; 
 padding：5px; 
} 
  

虽然大部分情况非常简单，但还是有一些有趣的事情发生。
$ b 首先，＃audio-player 样式调用浏览器特定的（但不是全部）样式来禁用文本选择的控制：

  -webkit-user-select：none; / * webkit（safari，chrome）浏览器* / 
 -moz-user-select：none; / * mozilla浏览器* / 
 -khtml-user-select：none; / * webkit（konqueror）浏览器* / 
 -ms-user-select：none; / * IE10 + * / 
  

jQueryUI progressbar控件使用预定义的类使用条形颜色进行样式化：

  .ui-progressbar {
背景：＃2B2B2B; 
} 
 
 .ui-progressbar-value {
 background：white; 
} 
  

div -based通过改变它们的显示布局，控件可以正确布局：

  display：inline-block; 
  

使用相对定位将控件显式放置在正确的位置：

  position：relative; 
  

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）; 
 
函数getTime（t）{
 var m = ~~（t / 60），s = ~~（t％60）; 
 return（m <10？0+ m：m）+'：'+（s <10？0+ s：s）; 
} 
 
函数getProgressBarClickInfo（progress_bar，e）{
 var offset = progress_bar.position（）; 
 var x = e.pageX  -  offset.left; //或e.offsetX（尽管支持较少）
 var y = e.pageY  -  offset.top; //或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（函数（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 ）; 
 $（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 事件处理程序用于在音轨播放时更新曲目进度。这允许进度条增长到右侧以反映音轨中的当前位置。

卷和 progress_bar 元素会使用jQueryUI progressbar控件进行初始化，并且设置 click 处理程序以允许用户单击动态地改变位置。

$ b $

play_button 和 mute_button 处理点击以更改播放状态（播放/暂停）或音频状态（音量开/关）。这些处理程序动态地交换适当的FontAwesome类以正确地反映按钮上的当前状态。

$ b

最后， more_info 点击处理程序显示/隐藏信息托盘元素。使用jQuery animate 来隐藏/显示动画，以提供类似立体声组件的感觉，让人想起CD托盘弹出。另外，它给控制提供了一个很好的伺服类似的感觉。因为这就是我想要的，除此之外没有其他原因。

I have a layout for an audio player that I'd like to use with the HTML audio player element.

I was trying <audio></audio>, and it's giving me the default player:

Is there any way to change the style of the player to use the layout that I want to use?

解决方案

You can whip up a very nice looking set of custom audio controls for the HTML5 audio player pretty quickly. Using (mostly) basic HTML and CSS, with some light Javascript event handling is all that's required. This solution a fully-functional custom audio player based on the design provided.

The full code and example can be found in the jsFiddle: https://jsfiddle.net/mgaskill/zo3ede1c/. Click through and play with it as you like, because it really is a working audio player.

The Player

The player includes all of the elements described in the original design. You can see this (and compare to the original) in this first image:

In addition, I extended the design slightly by providing a collapsible "info tray", which is hidden and shown by pressing the "More Info" button on the right. You can see the tray deployed in the second image:

Sure, the colors aren't identical, and there may be pixel-specific differences from the original design, but it's very close. My core skill set is not CSS, so there's room for improvement there. However, it's very, very close to the original design, and retains all of the spirit, layout, and functionality of that design.

The Tools

This solution made use of a few external elements, for the sake of convenience. These are:

• jQuery: because I typically prefer it over bare Javascript
• jQueryUI: for the track progress and volume control, because the HTML5 progressbar isn't available on some browsers, notably older versions of IE and some mobile browsers
• FontAwesome: for the play/pause and volume/mute button graphics
• Noise Addicts Free MP3 Samples: for the brilliant Semper Fidelis March

The HTML

The HTML takes the approach of handling each component on the audio controls panel as a separate element. The HTML layout is pretty pedestrian, and the only interesting bits are really the use of the FontAwesome classes to achieve the initial state icons for the play/pause and volume/mute buttons.

<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>

Note that the entirety of the audio controls are contained within the #audio-player element.

The CSS

The CSS gives life to the HTML, and in this case, is used to provide color, placement, and action.

#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;
}

While most of this is pretty straightforward, there are some interesting things going on.

First, the #audio-player style invokes browser-specific (but not all-inclusive) styles to disable text selection of the controls:

-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+ */

The jQueryUI progressbar controls are styled with bar colors using the pre-defined classes:

.ui-progressbar {
    background: #2B2B2B;
}

.ui-progressbar-value {
    background: white;
}

div-based controls are made to layout properly by changing their display layout:

display: inline-block;

Controls are placed explicitly in the proper locations using relative positioning:

position: relative;

The Javascript

The Javascript is largely oriented to handling events for the various controls and states.

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);
});

The onloadedmetadata event handler is used to identify when the audio has been loaded, so that the track progress can be initialized to the audio track's length (duration).

The timeupdate event handler is used to update the track progress as the audio track plays. This allows the progress bar to grow to the right to reflect the current position in the audio track.

The volume and progress_bar elements are initialized with the jQueryUI progressbar control, and click handlers are set to allow the user to click within to change the position dynamically.

The play_button and mute_button handle clicks to change the play state (play/pause) or the audio state (volume on/off). These handlers dynamically swap in the appropriate FontAwesome class to properly reflect the current state on the button.

Finally, the more_info click handler shows/hides the information tray element. The hide/show is animated using the jQuery animate to provide a stereo component-like feel, reminiscent of a CD tray ejection. Plus, it gives a nice servo-like feel to the control. Because that's what I wanted it to do, and no other reason than that.

这篇关于如何使用HTML设计自定义音频播放器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！