Icontem

File: example/example2.html

Recommend this page to a friend!
  Classes of Axel Hahn  >  AMC JavaScript Audio Player HTML5  >  example/example2.html  >  Download  
File: example/example2.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: 8 months ago
Size: 9,348 bytes
 

Contents

Class file image Download
<!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>
        </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>
&lt;audio loop="loop"
	controls="controls"
	preload="none"
	title="<strong>[Title]</strong>"

        &lt;!-- 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]"
	>

	&lt;!-- audio sources -->
        ...

&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>
			<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>