<!DOCTYPE html>
<html>
<head>
<title>Demo AMC Player 1 </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.min.css" media="screen" />
</head>
<body>
<h1>Demo AMC Player :: Welcome!</h1>
<nav>
<a href="example1.html" class="active">Get started</a>
<a href="example2.html">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>Welcome</h2>
<p>
Welcome to the example section of the AMC PLAYER!<br />
Here and in the next steps you get code snippets to start and how
to enable more functionalities step by step.
</p>
<script>
if(!location.host){
document.write('<p class="info">Remark:<br>You opened the example with "file://".<br>Not all browsers can handle it. If you see the player then all player functionalities work. But the icons in the player buttons are available only if the player is used in a website and opened with http(s).</p>');
}
</script>
<h2>Preparation</h2>
<p>
How to run the player?<br />
In your html document you need to add a css file in the header and
a javascript at the end.<br />
After loading the player javascript file you can init the player.<br>
<br>
And one little detail: next to the plain player there is a javascript that enables
drag and drop functionality. Just load it before the player javascript file.<br>
<br>
<strong>Remark</strong>: for all CSS and JS files exist original sources and
minified versions as well. All examples use the minified files.<br>
</p>
<h3>Html preview</h3>
<pre>
<head>
(...)
<link rel="stylesheet" type="text/css" href="../<strong>mcplayer.min.css</strong>" media="screen" />
</head>
<body>
(...)
<script src="../<strong>addi.min.js</strong>"></script>
<script src="../<strong>mcplayer.min.js</strong>"></script>
<!-- initialize the player -->
<script>
<strong>var oMcPlayer=new mcPlayer();</strong>
<strong>oMcPlayer.init();</strong>
</script>
</body>
</pre>
<!-- ************************************************************** -->
<h3>Drag and drop functionality</h3>
<p>
By default there is no drag and drop functionality of the
window like player.<br />
The player class detects the existance of my class <em>addi</em> (which is part of the download).<br />
You just need to load it before mcplayer.js.<br />
<br />
In this demo:<br />
</p>
<ol>
<li>Move your mouse pointer to the main player window. Hold the mouse key down and move the player window around.</li>
<li>Open a window i.e. playlist or download - you can move these windows too.</li>
<li>Press [F5] to reload the window. The windows you moved keep their position.</li>
</ol>
<!-- ************************************************************** -->
<h2>Add audios</h2>
<h3>stereo audios</h3>
<p>
For testing you can begin with with a single audio format.
I suggest to use mp3.<br>
</p>
<pre>
<audio loop="loop"
controls="controls"
preload="none"
title="<strong>[Title]</strong>"
>
<source src="<strong>[song-in-stereo].mp3</strong>" type="audio/mp3" data-ch="<strong>2.0</strong>" title="<strong>2.0</strong>" />
</audio>
</pre>
<h3>Surround Audio formats</h3>
<p>
The special feature of this player is handling sourrund audios.
Each songtitle must exist in stereo and surround in 2 formats for both channel types.
</p>
<ul>
<li>stereo:
<ul>
<li>Ogg - Ogg Theorea, stereo</li>
<li>Mp3 - MPEG I Layer 3 audio file (the classic mp3 file)</li>
</ul>
</li>
<li>5.1:
<ul>
<li>M4a - MPEG 4 audio (aac)</li>
<li>Ogg - Ogg Theorea, 5.1</li>
</ul>
</li>
</ul>
<p>
How to create the different file types?<br>
I recommend to automize the conversion of 2 exports (stereo, surround) of your DAW.<br>
I myself use a few batch files using ffmpeg, oggenc2 and neroAacEnc.<br>
</p>
<h3>Html preview</h3>
<p>
For each audio in your website you need a audio tag with several sources
for all channels.<br>
Also pay attention to the attributes to group the channels.
</p>
<pre>
<audio loop="loop"
controls="controls"
preload="none"
title="<strong>[Title]</strong>"
>
<!-- stereo sources -->
<source src="<strong>[song-in-stereo].mp3</strong>" type="audio/mp3" data-ch="<strong>2.0</strong>" title="<strong>2.0</strong>" />
<source src="<strong>[song-in-stereo].mp3</strong>" type="audio/mp3" data-ch="2.0" title="2.0" />
<!-- surround sources -->
<source src="<strong>[song-in-5.1-surround].m4a</strong>" type="audio/mp4" data-ch="<strong>5.1</strong>" title="<strong>5.1</strong>" />
<source src="<strong>[song-in-5.1-surround].ogg</strong>" type="audio/ogg" data-ch="5.1" title="5.1" />
<!-- for fallback add a flashplayer here -->
</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>
</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>
<p>
More: <a href="https://www.axel-hahn.de/music/axels-songs/" target="_blank">Axels songs</a> (German)
</p>
<!-- ************************************************************** -->
<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
