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: 2021-08-20: v1.03
UPDATE: Drag and drop improvement for Firefox
UPDATE: Last clicked player window comes to front
UPDATE: Moved window gets a bit transparent
Date: 2 years ago
Size: 26,752 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> <a href="example6.html">Streams</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>