Icontem

File: example/example3.html

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

Contents

Class file image Download
<!DOCTYPE html>
<html>
    <head>
        <title>Demo AMC Player 3</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 :: API</h1>
        <nav>
            <a href="example1.html">Get started</a>
            <a href="example2.html">Song infos</a>
            <a href="example3.html" class="active">API</a>
            <a href="example4.html">Skins</a>
            <a href="example5.html">Language</a>
        </nav>
        
        <!-- ************************************************************** -->

        <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 introduction.<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"
                        data-title="Planetradio"
                        data-url="http://www.planetradio.de"
                >
                <source src="http://mp3.planetradio.de/planetradio/hqlivestream.mp3" type="audio/mp3" />
            </audio>
            planetradio
        </div>
        -->
        
        <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>

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

        <h2>Player Actions</h2>

        <p>
            Play a song based on a number:<br>
            <button onclick="oMcPlayer.setSong(0)">setSong(0)</button>
            <button onclick="oMcPlayer.setSong(1)">setSong(1)</button>
            <button onclick="oMcPlayer.setSong(2)">setSong(2)</button>
            <button onclick="oMcPlayer.setSong(3)">setSong(3)</button>
            <button onclick="oMcPlayer.setSong(4)">setSong(4)</button>
            <br>
            <br>
            Navigate to previous/ next song<br>
            <button onclick="oMcPlayer.setPreviousSong()">setPreviousSong()</button>
            <button onclick="oMcPlayer.setNextSong()">setNextSong()</button>
            <br>
            <br>
            player actions play/ pause/ stop/ ...<br>
            <button onclick="oMcPlayer.playeraction('play')">playeraction('play')</button>
            <button onclick="oMcPlayer.playeraction('pause')">playeraction('pause')</button>
            <button onclick="oMcPlayer.playeraction('stop')">playeraction('stop')</button>
            <button onclick="oMcPlayer.playeraction('backward')">playeraction('backward')</button>
            <button onclick="oMcPlayer.playeraction('forward')">playeraction('forward')</button>
            <br>
            <br>
            set a postion (a float value in sec; must be lower duration)<br>
            <button onclick="oMcPlayer.setAudioPosition(0);">setAudioPosition(0)</button>
            <button onclick="oMcPlayer.setAudioPosition(60);">setAudioPosition(60)</button>
            <button onclick="oMcPlayer.setAudioPosition(180.33);">setAudioPosition(180.33)</button>
            <br>
            <br>
            set channel (see getAllChannels() to get available arguments)<br>
            <button onclick="oMcPlayer.setChannel('2.0');">setChannel('2.0')</button>
            <button onclick="oMcPlayer.setChannel('5.1');">setChannel('5.1')</button>
            <br>
            <br>
            <br>
            playing option repeat playlist<br>
            <button onclick="oMcPlayer.enableRepeat()">enableRepeat()</button>
            <button onclick="oMcPlayer.disableRepeat()">disableRepeat()</button>
            <button onclick="oMcPlayer.toggleRepeat()">toggleRepeat()</button>
            <br>
            <br>
            playing option shuffle playlist; see table below to see playlist order<br>
            <button onclick="oMcPlayer.enableShuffle()">enableShuffle()</button>
            <button onclick="oMcPlayer.disableShuffle()">disableShuffle()</button>
            <button onclick="oMcPlayer.toggleShuffle()">toggleShuffle()</button>

        </p>

        <h2>Volume</h2>

        <p>
            The volume is a float value 0..1<br>
            <button onclick="oMcPlayer.setVolume(0)">setVolume(0)</button>
            <button onclick="oMcPlayer.setVolume(0.25)">setVolume(0.25)</button>
            <button onclick="oMcPlayer.setVolume(0.5)">setVolume(0.5)</button>
            <button onclick="oMcPlayer.setVolume(0.75)">setVolume(0.75)</button>
            <button onclick="oMcPlayer.setVolume(1)">setVolume(1)</button>
        </p>


        <h2>Windows</h2>

        <p>
            min/ max player window<br>
            <button onclick="oMcPlayer.maximize()">maximize()</button>
            <button onclick="oMcPlayer.minimize()">minimize()</button>
            <br>
            <br>
            statusbar<br>
            <button onclick="oMcPlayer.enableStatusbar()">enableStatusbar()</button>
            <button onclick="oMcPlayer.disableStatusbar()">disableStatusbar()</button>
            <button onclick="oMcPlayer.toggleStatusbar()">toggleStatusbar()</button>
            <br>
            <br>
            boxes<br>
            <button onclick="oMcPlayer.maximizeBox('about')">maximizeBox('about')</button>
            <button onclick="oMcPlayer.minimizeBox('about')">minimizeBox('about')</button>
            <button onclick="oMcPlayer.toggleBoxAndButton('about')">toggleBoxAndButton('about')</button>
            <br>
            <button onclick="oMcPlayer.maximizeBox('playlist')">maximizeBox('playlist')</button>
            <button onclick="oMcPlayer.minimizeBox('playlist')">minimizeBox('playlist')</button>
            <button onclick="oMcPlayer.toggleBoxAndButton('playlist')">toggleBoxAndButton('playlist')</button>
            <br>
            <button onclick="oMcPlayer.maximizeBox('download')">maximizeBox('download')</button>
            <button onclick="oMcPlayer.minimizeBox('download')">minimizeBox('download')</button>
            <button onclick="oMcPlayer.toggleBoxAndButton('download')">toggleBoxAndButton('download')</button>
        </p>

        <h2>Infos</h2>
        <p>
            These are realtime infos you can fetch with different getter methods.
        </p>
        <table>
            <tr>
                <th>item</th>
                <th>method</th>
                <th>type</th>
                <th>response</th>
            </tr>
            <tr>
                <td>current song</td>
                <td>getSong()</td>
                <td>hash</td>
                <td><span id="spanSong" class="val-hash">...</span></td>
            </tr>
            <tr>
                <td>Id of current song in the playlist; starting with 0</td>
                <td>getSongId()</td>
                <td>integer</td>
                <td><span id="spanCurrentsong" class="val-integer">...</span></td>
            </tr>
			
			
            <tr>
                <td>Title of the current song</td>
                <td>getSongTitle()</td>
                <td>string</td>
                <td><span id="spanCurrenttitle" class="val-string">...</span></td>
            </tr>
            <tr>
                <td>Artist of the current song</td>
                <td>getSongArtist()</td>
                <td>string</td>
                <td><span id="spanCurrentartist" class="val-string">...</span></td>
            </tr>
            <tr>
                <td>Album of the current song</td>
                <td>getSongAlbum()</td>
                <td>string</td>
                <td><span id="spanCurrentalbum" class="val-string">...</span></td>
            </tr>
            <tr>
                <td>Year of publishing</td>
                <td>getSongYear()</td>
                <td>integer</td>
                <td><span id="spanCurrentyear" class="val-integer">...</span></td>
            </tr>
            <tr>
                <td>Image of the cover</td>
                <td>getSongImage()</td>
                <td>string</td>
                <td><span id="spanCurrentimage" class="val-string">...</span></td>
            </tr>
            <tr>
                <td>Genre of the song</td>
                <td>getSongGenre()</td>
                <td>string</td>
                <td><span id="spanCurrentgenre" class="val-string">...</span></td>
            </tr>
            <tr>
                <td>Speed in bmp</td>
                <td>getSongBpm()</td>
                <td>integer</td>
                <td><span id="spanCurrentbpm" class="val-integer">...</span></td>
            </tr>
            <tr>
                <td>Url for this song; maybe where to buy</td>
                <td>getSongUrl()</td>
                <td>string</td>
                <td><span id="spanCurrenturl" class="val-string">...</span></td>
            </tr>
			
			
            <tr>
                <td>Position in the audio; value is in sec</td>
                <td>getAudioPosition()</td>
                <td>float</td>
                <td><span id="spanAudiopos" class="val-float">...</span></td>
            </tr>
            <tr>
                <td>Duration of the audio; value is in sec</td>
                <td>getAudioDuration()</td>
                <td>float</td>
                <td><span id="spanAudioduration" class="val-float">...</span></td>
            </tr>
            <tr>
                <td>get all available channels of the current song</td>
                <td>getAllAudioChannels()</td>
                <td>array</td>
                <td><span id="spanAllAudiochannels" class="val-array">...</span></td>
            </tr>
            <tr>
                <td>Currently used channels</td>
                <td>getAudioChannels()</td>
                <td>string</td>
                <td><span id="spanAudiochannels" class="val-string">...</span></td>
            </tr>
            <tr>
                <td>Source file; url of the current audio</td>
                <td>getAudioSrc()</td>
                <td>string</td>
                <td><span id="spanAudiosrc" class="val-string">...</span></td>
            </tr>
            <tr>
                <td>get network state of the current audio</td>
                <td>getAudioNetworkstate()</td>
                <td>integer</td>
                <td><span id="spanAudionetworkstate" class="val-integer">...</span></td>
            </tr>
            <tr>
                <td>get ready state of the current audio</td>
                <td>getAudioReadystate()</td>
                <td>integer</td>
                <td><span id="spanAudioreadystate" class="val-integer">...</span></td>
            </tr>
            <tr>
                <td>is playing</td>
                <td>isPlaying()</td>
                <td>boolean</td>
                <td><span id="spanIsPlaying" class="val-bool">...</span></td>
            </tr>
            <tr>
                <td>is paused</td>
                <td>isPaused()</td>
                <td>boolean</td>
                <td><span id="spanIsPaused" class="val-bool">...</span></td>
            </tr>
            <tr>
                <td>is stopped</td>
                <td>isStopped()</td>
                <td>boolean</td>
                <td><span id="spanIsStopped" class="val-bool">...</span></td>
            </tr>
            <tr>
                <td>is it a stream? true means a stream; false is a media file<br>Remark: it will be detected after the audio was started</td>
                <td>isStream()</td>
                <td>boolean</td>
                <td><span id="spanIsStream" class="val-bool">...</span></td>
            </tr>
            <tr>
                <td>Get volume (value 0..1)</td>
                <td>getVolume()</td>
                <td>float</td>
                <td><span id="spanCurrentvolume" class="val-float">...</span></td>
            </tr>
            <tr>
                <td>is muted</td>
                <td>isMuted()</td>
                <td>boolean</td>
                <td><span id="spanIsMuted" class="val-bool">...</span></td>
            </tr>
            <tr>
                <td>is list repeated</td>
                <td>isRepeatlist()</td>
                <td>boolean</td>
                <td><span id="spanIsRepeatlist" class="val-bool">...</span></td>
            </tr>
            <tr>
                <td>is shuffled</td>
                <td>isShuffled()</td>
                <td>boolean</td>
                <td><span id="spanIsShuffled" class="val-bool">...</span></td>
            </tr>
            
            <tr>
                <td>is box about visible</td>
                <td>isVisibleBoxAbout()</td>
                <td>boolean</td>
                <td><span id="spanIsVisibleBoxAbout" class="val-bool">...</span></td>
            </tr>
            <tr>
                <td>is box download visible</td>
                <td>isVisibleBoxDownload()</td>
                <td>boolean</td>
                <td><span id="spanIsVisibleBoxDownload" class="val-bool">...</span></td>
            </tr>
            <tr>
                <td>is box playlist visible</td>
                <td>isVisibleBoxPlaylist()</td>
                <td>boolean</td>
                <td><span id="spanIsVisibleBoxPlaylist" class="val-bool">...</span></td>
            </tr>
            <tr>
                <td>is player window visible</td>
                <td>isVisiblePlayer()</td>
                <td>boolean</td>
                <td><span id="spanIsVisiblePlayer" class="val-bool">...</span></td>
            </tr>
            <tr>
                <td>is the statusbar visible</td>
                <td>isVisibleStatusbar()</td>
                <td>boolean</td>
                <td><span id="spanIsVisibleStatusbar" class="val-bool">...</span></td>
            </tr>
            
            <tr>
                <td>Order of songs to play (it is randomized if isShuffled() is true)</td>
                <td>getPlayorder()</td>
                <td>array</td>
                <td><span id="spanPlayorder" class="val-array">...</span></td>
            </tr>
            <tr>
                <td>Count of items in the Playlist</td>
                <td>getPlaylistCount()</td>
                <td>integer</td>
                <td><span id="spanPlaylistCount" class="val-integer">...</span></td>
            </tr>
            <tr>
                <td>number of the currently active song in the playlist (if shuffled)</td>
                <td>getPlaylistId()</td>
                <td>integer</td>
                <td><span id="spanPlaylistId" class="val-integer">...</span></td>
            </tr>
            <tr>
                <td>Playlist</td>
                <td>getPlaylist()</td>
                <td>hash</td>
                <td><span id="spanPlaylist" class="val-hash">...</span></td>
            </tr>
        </table>

        <script src="../addi.min.js"></script>
        <script src="../mcplayer.min.js"></script>
        <script>
                // show player
                var oMcPlayer = new mcPlayer();
                oMcPlayer.init();

                function updateInfos() {
                    try {
                        document.getElementById("spanPlayorder").innerHTML = '<pre>[' + oMcPlayer.getPlayorder().toString() + ']</pre>';
                        document.getElementById("spanPlaylistId").innerHTML = oMcPlayer.getPlaylistId();
                        document.getElementById("spanCurrentsong").innerHTML = oMcPlayer.getSongId();
						
                        document.getElementById("spanCurrenttitle").innerHTML = oMcPlayer.getSongTitle();
                        document.getElementById("spanCurrentartist").innerHTML = oMcPlayer.getSongArtist();
                        document.getElementById("spanCurrentalbum").innerHTML = oMcPlayer.getSongAlbum();
                        document.getElementById("spanCurrentyear").innerHTML = oMcPlayer.getSongYear();
                        document.getElementById("spanCurrentimage").innerHTML = oMcPlayer.getSongImage();
                        document.getElementById("spanCurrentgenre").innerHTML = oMcPlayer.getSongGenre();
                        document.getElementById("spanCurrentbpm").innerHTML = oMcPlayer.getSongBpm();
                        document.getElementById("spanCurrenturl").innerHTML = oMcPlayer.getSongUrl();
						
                        document.getElementById("spanSong").innerHTML = '<pre>' + JSON.stringify(oMcPlayer.getSong(), null, '  ') + '</pre>';
                        document.getElementById("spanIsPlaying").innerHTML = oMcPlayer.isPlaying();
                        document.getElementById("spanIsPaused").innerHTML = oMcPlayer.isPaused();
                        document.getElementById("spanIsStopped").innerHTML = oMcPlayer.isStopped();
                        document.getElementById("spanIsStream").innerHTML = oMcPlayer.isStream();
                        document.getElementById("spanIsMuted").innerHTML = oMcPlayer.isMuted();
                        document.getElementById("spanIsShuffled").innerHTML = oMcPlayer.isShuffled();
                        document.getElementById("spanIsRepeatlist").innerHTML = oMcPlayer.isRepeatlist();
                        document.getElementById("spanIsVisibleBoxAbout").innerHTML = oMcPlayer.isVisibleBoxAbout();
                        document.getElementById("spanIsVisibleBoxDownload").innerHTML = oMcPlayer.isVisibleBoxDownload();
                        document.getElementById("spanIsVisibleBoxPlaylist").innerHTML = oMcPlayer.isVisibleBoxPlaylist();
                        document.getElementById("spanIsVisiblePlayer").innerHTML = oMcPlayer.isVisiblePlayer();
                        document.getElementById("spanIsVisibleStatusbar").innerHTML = oMcPlayer.isVisibleStatusbar();
                        document.getElementById("spanCurrentvolume").innerHTML = oMcPlayer.getVolume();
                        document.getElementById("spanAudiopos").innerHTML = oMcPlayer.getAudioPosition();
                        document.getElementById("spanAudioduration").innerHTML = oMcPlayer.getAudioDuration();
                        document.getElementById("spanAudiochannels").innerHTML = oMcPlayer.getAudioChannels();
                        document.getElementById("spanAllAudiochannels").innerHTML = '<pre>[' + oMcPlayer.getAllAudioChannels().toString() + ']</pre>';
                        document.getElementById("spanAudiosrc").innerHTML = oMcPlayer.getAudioSrc();
                        document.getElementById("spanAudionetworkstate").innerHTML = oMcPlayer.getAudioNetworkstate();
                        document.getElementById("spanAudioreadystate").innerHTML = oMcPlayer.getAudioReadystate();
                        document.getElementById("spanPlaylistCount").innerHTML = oMcPlayer.getPlaylistCount();
                        document.getElementById("spanPlaylist").innerHTML = '<pre>' + JSON.stringify(oMcPlayer.getPlaylist(), null, '  ') + '</pre>';
                    } catch (e) {
                        // 
                    }
                    window.setTimeout("updateInfos();", 100);
                }
                updateInfos();

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