<!DOCTYPE html>
<html>
<head>
<title>Demo AMC Player 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="example.css" />
<link rel="stylesheet" type="text/css" href="../mcplayer.css" media="screen" />
</head>
<body>
<h1>Demo AMC Player :: Show song infos</h1>
<nav>
<a href="example1.html">Get started</a>
<a href="example2.html" class="active">Song infos</a>
<a href="example3.html">API</a>
<a href="example4.html">Skins</a>
<a href="example5.html">Language</a>
<a href="example6.html">Streams</a>
</nav>
<!-- ************************************************************** -->
<h2>Add song infos</h2>
<p>
For each song you can add metadata for artist, album, a cover image and more.<br>
These information must be added as data attributes in the audio tag.<br>
<br>
If such infos were added the player will display them while the song
is active.
</p>
<h3>Html preview</h3>
<pre>
<audio loop="loop"
controls="controls"
preload="none"
title="<strong>[Title]</strong>"
<!-- optional: more song metadata with html 5 data attributes -->
data-<strong>title</strong>="[Title]"
data-<strong>artist</strong>="[Name of the artist]"
data-<strong>album</strong>="[Name of the album]"
data-<strong>year</strong>="[4 digit year]"
data-<strong>image</strong>="[url for a cover image]"
data-<strong>genre</strong>="[genre]"
data-<strong>bpm</strong>="[value for speed in bpm]"
data-<strong>url</strong>="[url for the song; i.e. where to buy]"
>
<!-- audio sources -->
...
</audio>
</pre>
<!-- ************************************************************** -->
<h2>Example audios</h2>
<p>
The following audios are linked to my website www.axel-hahn.de
They are free for non commercial usage (license: cc 3.0 - by-nc-sa).<br>
<a href="https://www.axel-hahn.de/music/axels-songs/" target="_blank">Axels songs</a>
</p>
<div style="clear: left; padding: 0.5em 1em;">
<audio loop="loop"
controls="controls"
preload="none"
title="Ticker"
data-title="Ticker"
data-artist="Axel Hahn"
data-album=""
data-year="2017"
data-image="https://www.axel-hahn.de/assets/audio/cover/ticker.jpg"
data-genre="electronic"
data-bpm="120"
data-url="https://www.axel-hahn.de/music/axels-songs"
>
<!-- stereo sources -->
<source src="https://www.axel-hahn.de/axel/download/ticker_2.0_.ogg" type="audio/ogg" data-ch="2.0" title="2.0" />
<source src="https://www.axel-hahn.de/axel/download/ticker_2.0_.mp3" type="audio/mp3" data-ch="2.0" title="2.0" />
<!-- surround sources -->
<source src="https://www.axel-hahn.de/axel/download/ticker_5.1_.m4a" type="audio/mp4" data-ch="5.1" title="5.1" />
<source src="https://www.axel-hahn.de/axel/download/ticker_5.1_.ogg" type="audio/ogg" data-ch="5.1" title="5.1" />
<!-- for fallback add a flashplayer here -->
</audio>
Ticker
</div>
<div style="clear: left; padding: 0.5em 1em;">
<audio loop="loop"
controls="controls"
preload="none"
title="Let's Play"
data-title="Let's Play"
data-artist="Axel Hahn"
data-album=""
data-year="2017"
data-image="https://www.axel-hahn.de/assets/audio/cover/lets_play.jpg"
data-genre="electronic"
data-bpm="80"
data-url="https://www.axel-hahn.de/music/axels-songs"
>
<!-- stereo sources -->
<source src="https://www.axel-hahn.de/axel/download/lets-play_2.0_.ogg" type="audio/ogg" data-ch="2.0" title="2.0" />
<source src="https://www.axel-hahn.de/axel/download/lets-play_2.0_.mp3" type="audio/mp3" data-ch="2.0" title="2.0" />
<!-- surround sources -->
<source src="https://www.axel-hahn.de/axel/download/lets-play_5.1_.m4a" type="audio/mp4" data-ch="5.1" title="5.1" />
<source src="https://www.axel-hahn.de/axel/download/lets-play_5.1_.ogg" type="audio/ogg" data-ch="5.1" title="5.1" />
<!-- for fallback add a flashplayer here -->
</audio>
Let's Play
</div>
<div style="clear: left; padding: 0.5em 1em;">
<audio loop="loop"
controls="controls"
preload="none"
title="Lift Control"
data-title="Lift Control"
data-artist="Axel Hahn"
data-album=""
data-year="2016"
data-image="https://www.axel-hahn.de/assets/audio/cover/lift-control.jpg"
data-genre="electronic"
data-bpm="125"
data-url="https://www.axel-hahn.de/music/axels-songs"
>
<!-- stereo sources -->
<source src="https://www.axel-hahn.de/axel/download/lift-control_2.0_.ogg" type="audio/ogg" data-ch="2.0" title="2.0" />
<source src="https://www.axel-hahn.de/axel/download/lift-control_2.0_.mp3" type="audio/mp3" data-ch="2.0" title="2.0" />
<!-- surround sources -->
<source src="https://www.axel-hahn.de/axel/download/lift-control_5.1_.m4a" type="audio/mp4" data-ch="5.1" title="5.1" />
<source src="https://www.axel-hahn.de/axel/download/lift-control_5.1_.ogg" type="audio/ogg" data-ch="5.1" title="5.1" />
<!-- for fallback add a flashplayer here -->
</audio>
Lift Control
</div>
<div style="clear: left; padding: 0.5em 1em;">
<audio loop="loop"
controls="controls"
preload="none"
title="November"
data-title="November"
data-artist="Axel Hahn"
data-album=""
data-year="2015"
data-image="https://www.axel-hahn.de/assets/audio/cover/november.jpg"
data-genre="electronic"
data-bpm="125"
data-url="https://www.axel-hahn.de/music/axels-songs"
>
<!-- stereo sources -->
<source src="https://www.axel-hahn.de/axel/download/november_2.0_.ogg" type="audio/ogg" data-ch="2.0" title="2.0" />
<source src="https://www.axel-hahn.de/axel/download/november_2.0_.mp3" type="audio/mp3" data-ch="2.0" title="2.0" />
<!-- surround sources -->
<source src="https://www.axel-hahn.de/axel/download/november_5.1_.m4a" type="audio/mp4" data-ch="5.1" title="5.1" />
<source src="https://www.axel-hahn.de/axel/download/november_5.1_.ogg" type="audio/ogg" data-ch="5.1" title="5.1" />
<!-- for fallback add a flashplayer here -->
</audio>
November
</div>
<div style="clear: left; padding: 0.5em 1em;">
<audio loop="loop"
controls="controls"
preload="none"
title="Give me a BIT more"
data-title="Give me a BIT more"
data-artist="Axel Hahn"
data-album=""
data-year="2015"
data-image="https://www.axel-hahn.de/assets/audio/cover/gimme-a-bit-more.jpg"
data-genre="electronic"
data-bpm="120"
data-url="https://www.axel-hahn.de/music/axels-songs"
>
<!-- stereo sources -->
<source src="https://www.axel-hahn.de/axel/download/gimme-a-bit-more_2.0_.ogg" type="audio/ogg" data-ch="2.0" title="2.0" />
<source src="https://www.axel-hahn.de/axel/download/gimme-a-bit-more_2.0_.mp3" type="audio/mp3" data-ch="2.0" title="2.0" />
<!-- surround sources -->
<source src="https://www.axel-hahn.de/axel/download/gimme-a-bit-more_5.1_.m4a" type="audio/mp4" data-ch="5.1" title="5.1" />
<source src="https://www.axel-hahn.de/axel/download/gimme-a-bit-more_5.1_.ogg" type="audio/ogg" data-ch="5.1" title="5.1" />
<!-- for fallback add a flashplayer here -->
</audio>
Give me a BIT more
</div>
<!-- ************************************************************** -->
<!-- TODO: use minified versions -->
<script src="../addi.min.js"></script>
<script src="../mcplayer.min.js"></script>
<script>
var oMcPlayer=new mcPlayer();
oMcPlayer.init();
</script>
<br /><br /><br /><br />
<hr>
DOCS: <a href="https://www.axel-hahn.de/docs/amcplayer/index.htm" target="_blank">https://www.axel-hahn.de/docs/amcplayer/index.htm</a>
</body>
</html>
|
Download
