Icontem

File: example/example5.html

Recommend this page to a friend!
  Classes of Axel Hahn  >  AMC JavaScript Audio Player HTML5  >  example/example5.html  >  Download  
File: example/example5.html
Role: Example script
Content type: text/plain
Description: Example
Class: AMC JavaScript Audio Player HTML5
DIsplay an audio player with surround support
Author: By
Last change:
Date: 6 months ago
Size: 9,703 bytes
 

Contents

Class file image Download
<!DOCTYPE html>
<html>
    <head>
        <title>Demo AMC Player 5</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script src="functions.js"></script>
        <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 :: Language</h1>
        <nav>
            <a href="example1.html">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" class="active">Language</a>
        </nav>

        <!-- ************************************************************** -->

        <h2>Set a language</h2>
        <p>
            With the shipped javascript you get an English interface.<br>
            To load a language you need to include a language file from
            the <strong>lang</strong> directory. <br>
            The language file contains all texts in the variable <em>aAmcLang</em>.
            This needs to be set as variable.<br>
            <br>
            In this example the German languagefile is loaded.<br>
        </p>

        <h3>Html preview</h3>
        <pre>
            (...)
            &lt;script src="mcplayer.min.js">&lt;/script>
        
            &lt;!-- load a lang file ... it contains data in aAmcLang -->
            &lt;script src="<strong>lang/mcplayer-de.min.js</strong>">&lt;/script>

            &lt;script>
                var oMcPlayer=new mcPlayer(<strong>aAmcLang</strong>);
                oMcPlayer.init();
            &lt;/script>

            <span id="preview1placeholder">(...)</span>
        </pre>

        <!-- ************************************************************** -->

        <h2>Example audios</h2>
        <p>
            The following audios are linked to my website https://www.axel-hahn.de 
            They are free for non commercial usage (license: cc 3.0 - by-nc-sa).
            This is the same set like in the introction.<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>

		
		
        <!-- ************************************************************** -->


        <script src="../addi.min.js"></script>
        <script src="../mcplayer.min.js"></script>
        
        <!-- load a lang file ... it contains data in aAmcLang -->
        <script src="../lang/mcplayer-de.min.js"></script>
        
        <script>
            var oMcPlayer=new mcPlayer(aAmcLang);
            oMcPlayer.init();
            oMcPlayer.enableStatusbar();
            oMcPlayer.maximizeBox('playlist');
            oMcPlayer.maximizeBox('download');
        </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>