AMC JavaScript Audio Player HTML5: DIsplay an audio player with surround support

Recommend this page to a friend!

Download

Info

Example

Files

Download

Reputation

Support forum

Blog

Links

Ratings				Unique User Downloads		Download Rankings
Not yet rated by the users				Total: 41		All time: 510 This week: 4

Version		License		JavaScript version		Categories
`amcplayer` 1.00		GNU General Publi...		5		HTML, Audio

Description

Author

Axel Hahn

This package can display an audio player with stereo and surround sound support.

It can display the player controls on a Web page supporting features like skins and multiple language support.

Axel Hahn

Performance

Level

Name:	Axel Hahn `<contact>`
Classes:	3 packages by Axel Hahn
Country:	Switzerland
Age:	52
All time rank:	126	2 in Switzerland
Week rank:	6	1 in Switzerland

Level 1

Innovation award

Nominee: 1x

Winner: 1x

Example

<!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 &quot;file://&quot;.<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>
&lt;head>
  (...)
  &lt;link rel="stylesheet" type="text/css" href="../<strong>mcplayer.min.css</strong>" media="screen" />
&lt;/head>
&lt;body>

  (...)
  
  &lt;script src="../<strong>addi.min.js</strong>">&lt;/script>
  &lt;script src="../<strong>mcplayer.min.js</strong>">&lt;/script>

  &lt;!-- initialize the player -->
  &lt;script>
    <strong>var oMcPlayer=new mcPlayer();</strong>
    <strong>oMcPlayer.init();</strong>
  &lt;/script>

&lt;/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>
&lt;audio loop="loop"
	controls="controls"
	preload="none"
	title="<strong>[Title]</strong>"
	>
	
	&lt;source src="<strong>[song-in-stereo].mp3</strong>" type="audio/mp3" data-ch="<strong>2.0</strong>" title="<strong>2.0</strong>" />

&lt;/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>
&lt;audio loop="loop"
	controls="controls"
	preload="none"
	title="<strong>[Title]</strong>"
	>
	
	&lt;!-- stereo sources -->
	&lt;source src="<strong>[song-in-stereo].mp3</strong>" type="audio/mp3" data-ch="<strong>2.0</strong>" title="<strong>2.0</strong>" />
	&lt;source src="<strong>[song-in-stereo].mp3</strong>" type="audio/mp3" data-ch="2.0" title="2.0" />

	&lt;!-- surround sources -->
	&lt;source src="<strong>[song-in-5.1-surround].m4a</strong>" type="audio/mp4" data-ch="<strong>5.1</strong>" title="<strong>5.1</strong>"  />
	&lt;source src="<strong>[song-in-5.1-surround].ogg</strong>" type="audio/ogg" data-ch="5.1" title="5.1" />

	&lt;!-- for fallback add a flashplayer here -->

&lt;/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>

Details

-------------------------------------------------------------------------------

	AMC 
	Axels multi channel player

	This is a webbased HTML5 audio player.
	It's focus is the handling of media in stereo and surround for a title.

-------------------------------------------------------------------------------

	project home: http://sourceforge.net/p/amcplayer/
	docs: https://www.axel-hahn.de/docs/amcplayer/index.htm
	      or see ./example/example1.html

	licence: GNU GPL

Files (33)

File	Role	Description
`example` (8 files)
`lang` (2 files)
`skins` (14 files)
`addi.js`	Class	Class source
`addi.min.js`	Class	Class source
`INSTALL`	Data	Auxiliary data
`mcplayer.css`	Data	Auxiliary data
`mcplayer.js`	Class	Class source
`mcplayer.min.css`	Data	Auxiliary data
`mcplayer.min.js`	Class	Class source
`README`	Doc.	Documentation
`_mcplayer_icons.css`	Data	Auxiliary data

Files (33)

example

File	Role	Description
`example.css`	Data	Auxiliary data
`example1.html`	Example	Example
`example2.html`	Example	Example
`example3.html`	Example	Example
`example4.html`	Example	Example
`example5.html`	Example	Example
`example6.html`	Doc.	Documentation
`functions.js`	Aux.	Auxiliary script

Files (33)

lang

File	Role	Description
`mcplayer-de.js`	Aux.	Auxiliary script
`mcplayer-de.min.js`	Aux.	Auxiliary script

Files (33)

skins

File	Role	Description
`mcplayer-bottombar.css`	Data	Auxiliary data
`mcplayer-bottombar.min.css`	Data	Auxiliary data
`mcplayer-darkgray.css`	Data	Auxiliary data
`mcplayer-darkgray.min.css`	Data	Auxiliary data
`mcplayer-flat-dark.css`	Data	Auxiliary data
`mcplayer-flat-dark.min.css`	Data	Auxiliary data
`mcplayer-flat-white-black.css`	Data	Auxiliary data
`mcplayer-flat-white-black.min.css`	Data	Auxiliary data
`mcplayer-lightbrown.css`	Data	Auxiliary data
`mcplayer-lightbrown.min.css`	Data	Auxiliary data
`mcplayer-lightgreen.css`	Data	Auxiliary data
`mcplayer-lightgreen.min.css`	Data	Auxiliary data
`mcplayer-lightviolet.css`	Data	Auxiliary data
`mcplayer-lightviolet.min.css`	Data	Auxiliary data