metro4
Version:
The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style
310 lines (280 loc) • 15.8 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="twitter:site" content="@metroui">
<meta name="twitter:creator" content="@pimenov_sergey">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Metro 4 Components Library">
<meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.">
<meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:url" content="https://metroui.org.ua/v4/index.html">
<meta property="og:title" content="Metro 4 Components Library">
<meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.">
<meta property="og:type" content="website">
<meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="968">
<meta property="og:image:height" content="504">
<meta name="author" content="Sergey Pimenov">
<meta name="description" content="The most popular HTML, CSS, and JS library in Metro style.">
<meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
<link href="highlight/styles/github.css" rel="stylesheet">
<link href="docsearch/docsearch.min.css" rel="stylesheet">
<link href="css/site.css" rel="stylesheet">
<title>Audio player - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend">
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div>
<div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
<h5>Table of contents</h5>
<hr/>
<ul class="toc-nav">
<li class="toc-entry"><a href="#">Audio player</a></li>
<li class="toc-entry"><a href="#_audio_create">Create player</a></li>
<li class="toc-entry">
<a href="#_audio_controls">Controls</a>
<ul>
<li class="toc-entry"><a href="#_audio_controls_show">Show controls</a></li>
<li class="toc-entry"><a href="#_audio_controls_images">Controls images</a></li>
</ul>
</li>
<li class="toc-entry"><a href="#_audio_controls_schemes">Color schemes</a></li>
<li class="toc-entry"><a href="#_audio_options">Audio options</a></li>
<li class="toc-entry"><a href="#_audio_events">Events</a></li>
<li class="toc-entry"><a href="#_audio_methods">Methods</a></li>
<li class="toc-entry"><a href="#_audio_observe">Observe</a></li>
</ul>
</div>
<main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
<div class="place-right d-none d-block-lg" style="width: 200px;">
<img src="images/logo.png" class="w-100">
</div>
<h1>Audio player</h1>
<p class="text-leader">
Create cool styled audio player in one command with Metro 4 video role.
</p>
<!-- ads-html -->
<h3 id="_audio_create">Create player</h3>
<p>
It is often necessary to play files to the user. Use the Metro 4 audio player to play audio the same in all systems.
</p>
<p>
To create <code>audio player</code> add attribute <code>data-role="audio"</code> to <code>audio</code> element.
To define audio file add attribute <code>data-src="..."</code>.
</p>
<div class="example">
<audio id="a1" data-role="audio" data-src="https://metroui.org.ua/res/hotel_california.mp3"></audio>
</div>
<pre><code class="html">
<audio data-role="audio" data-src="file.mp3"></audio>
</code></pre>
<h3 id="_audio_controls">Controls</h3>
<p>
You can define what controls will be shown and what image contained in it.
</p>
<h4 id="_audio_controls_show">Show controls</h4>
<p>
To define controls shown use attributes:
<code>data-show-loop</code>,
<code>data-show-play</code>,
<code>data-show-stop</code>,
<code>data-show-stream</code>,
<code>data-show-volume</code>.
All this attributes has ben one of two values: <code>true</code> or <code>false</code>.
</p>
<div class="example">
<audio data-role="audio"
data-src="https://metroui.org.ua/res/hotel_california.mp3"
data-show-loop="false"
data-show-stop="false"
data-show-volume="false"
data-show-info="false"
></audio>
</div>
<pre><code class="html">
<audio data-role="audio"
data-src="https://metroui.org.ua/res/hotel_california.mp3"
data-show-loop="false"
data-show-stop="false"
data-show-volume="false"
data-show-info="false">
</audio>
</code></pre>
<h4 id="_audio_controls_images">Define controls images</h4>
<p>
To define controls images use next attributes:
<code>data-loop-icon</code>,
<code>data-play-icon</code>,
<code>data-pause-icon</code>,
<code>data-stop-icon</code>,
<code>data-mute-icon</code>,
<code>data-volume-low-icon</code>,
<code>data-volume-medium-icon</code>,
<code>data-volume-high-icon</code>,
Values for these attributes must be valid html tag for icon from font or image.
</p>
<div class="example">
<audio data-role="audio"
data-loop-icon="<span class='mif-loop2 fg-orange'></span>"
data-mute-icon="<span class='mif-volume-mute2 fg-red'></span>"
data-volume-low-icon="<span class='mif-volume-low fg-yellow'></span>"
data-volume-medium-icon="<span class='mif-volume-medium fg-green'></span>"
data-volume-high-icon="<span class='mif-volume-high fg-red'></span>"
data-play-icon="<img src='images/play-icon.png'>"
data-stop-icon="<img src='images/player_stop.png'>"
data-src="https://metroui.org.ua/res/hotel_california.mp3">
</audio>
</div>
<pre><code class="html">
<audio data-role="audio"
data-loop-icon="<span class='mif-loop2 fg-orange'></span>"
data-mute-icon="<span class='mif-volume-mute2 fg-red'></span>"
data-volume-low-icon="<span class='mif-volume-low fg-yellow'></span>"
data-volume-medium-icon="<span class='mif-volume-medium fg-green'></span>"
data-volume-high-icon="<span class='mif-volume-high fg-red'></span>"
data-play-icon="<img src='images/play-icon.png'>"
data-stop-icon="<img src='images/player_stop.png'>"
data-src="file.mp3">
</audio>
</code></pre>
<h3 id="_audio_colors">Predefined colors</h3>
<p>
The <code>audio player</code> styled to two color schemes: <code>dark</code> (default) and <code>light</code>.
</p>
<h4 id="_audio_colors_dark">Dark scheme</h4>
<div class="example">
<audio data-role="audio" data-src="https://metroui.org.ua/res/hotel_california.mp3"></audio>
</div>
<pre><code class="html">
<audio data-role="audio" data-src="hotel_california.mp3"></audio>
</code></pre>
<h4 id="_audio_colors_light">Light scheme</h4>
<div class="example">
<audio data-role="audio" data-src="https://metroui.org.ua/res/hotel_california.mp3" class="light"></audio>
</div>
<pre><code class="html">
<audio data-role="audio" data-src="hotel_california.mp3" class="light"></audio>
</code></pre>
<!-- ads-html -->
<h3 id="_audio_options">Audio options</h3>
<p>
Use additional options to interact with component.
</p>
<h4 id="_audio_loop">Looping audio</h4>
<p>
You can set <code>looping audio</code> with attribute <code>data-loop="true"</code>.
</p>
<pre><code class="html">
<audio data-role="audio" data-loop="true"></audio>
</code></pre>
<h4 id="_audio_autoplay">Auto play audio</h4>
<p>
To <code>auto-play</code> audio, you can use attribute <code>data-autoplay="true"</code>.
</p>
<pre><code class="html">
<audio data-role="audio" data-autoplay="true"></audio>
</code></pre>
<h4 id="_audio_volume">Volume</h4>
<p>
You can setup <code>volume</code> with attribute <code>data-volume</code>. This value must be between <code>0</code> and <code>1</code>.
</p>
<pre><code class="html">
<audio data-role="audio" data-volume=".5"></audio>
</code></pre>
<h3 id="_audio_events">Events</h3>
<p>
When audio player works, it generated the numbers of events. You can use callback for this event to behavior with audio player.
</p>
<table class="table cell-border table-border options-table">
<thead>
<tr>
<th>Event</th>
<th>Data-*</th>
<th>Desc</th>
</tr>
</thead>
<tbody>
<tr>
<td>onPlay(audio, player)</td>
<td><code>data-on-play</code></td>
<td>Fired when audio playing started</td>
</tr>
<tr>
<td>onPause(audio, player)</td>
<td><code>data-on-pause</code></td>
<td>Fired when audio paused</td>
</tr>
<tr>
<td>onStop(audio, player)</td>
<td><code>data-on-stop</code></td>
<td>Fired when audio stopped</td>
</tr>
<tr>
<td>onEnd(audio, player)</td>
<td><code>data-on-end</code></td>
<td>Fired when audio ended</td>
</tr>
<tr>
<td>onMetadata(audio, player)</td>
<td><code>data-on-metadata</code></td>
<td>Fired when player get metadata</td>
</tr>
<tr>
<td>onTime(currTime, duration, audio, player)</td>
<td><code>data-on-time</code></td>
<td>Fired when player play audio</td>
</tr>
<tr>
<td>onAudioCreate(audio, player)</td>
<td><code>data-on-audio-create</code></td>
<td>Fired when player created</td>
</tr>
</tbody>
</table>
<h3 id="_audio_methods">Methods</h3>
<p>
You can use audio player methods to interact with the component.
</p>
<ul>
<li><strong>play()</strong> - play current video</li>
<li><strong>play(src)</strong> - play video from src</li>
<li><strong>pause()</strong> - pause playing</li>
<li><strong>resume()</strong> - resume playing</li>
<li><strong>stop()</strong> - stop playing</li>
<li><strong>volume()</strong> - get current volume</li>
<li><strong>volume(vol)</strong> - set volume</li>
<li><strong>loop()</strong> - toggle looping video</li>
<li><strong>mute()</strong> - mute video</li>
</ul>
<pre><code class="javascript">
var player = $(el).data('audio');
audio.play("https://metroui.org.ua/res/oceans.mp4");
audio.pause();
audio.resume();
</code></pre>
<h3 id="_audio_observe">Observe</h3>
<p>
You can change attributes <code>data-src</code> and <code>data-volume</code> at runtime.
</p>
</main>
</div>
</div>
<script src="docsearch/docsearch.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="metro/js/metro.js?ver=@@b-version"></script>
<script src="highlight/highlight.pack.js"></script>
<script src="js/clipboard.min.js"></script>
<script src="js/site.js"></script>
<!-- ads-script -->
<!-- ga-script -->
<!-- hit-ua -->
</body>
</html>