this is not the best mod, since it is running in an iframe, it has some gliches with the fullscreenmode of the 2moons skin 1.8 fullscreen-mode. this can be fixed if nessesary.
iframe is a browserwindow in a browserwindow. as the mod is just a play around, its not so important i think.
here is an example test
make a test.html in your gamefolder, copy following code in it, and save it. call it with the browser. should show your game with music in the right bottom corner u'll find the player controles. hover it for playlist and controling it
Display All
iframe is a browserwindow in a browserwindow. as the mod is just a play around, its not so important i think.
here is an example test
make a test.html in your gamefolder, copy following code in it, and save it. call it with the browser. should show your game with music in the right bottom corner u'll find the player controles. hover it for playlist and controling it
HTML Source Code
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>2moons</title>
- <script type="text/javascript" src="./scripts/base/jquery.js"></script>
- </head>
- <style>
- #playlist,audio{
- width:200px;
- padding:0px;
- margin:0px;
- }
- .active a{
- color:#5DB0E6 !important;
- text-decoration:none;
- }
- #playlist li a{
- text-decoration:none;
- color:#eeeedd;
- background:none;
- padding:0px;
- padding-right:2px;
- display:block;
- }
- #playlist li a:hover{
- background:#333;
- }
- #moonsframe{
- width: 100vw;
- height:100vh;
- background:#000;
- border:0px;
- }
- #bmusic{
- transform: scale(0.4);
- position: absolute;
- bottom: -120px;
- right: -59px;
- width: 200px;
- }
- #bmusic:hover{
- transform: scale(1.0);
- bottom:0px;
- right:20px;
- }
- </style>
- <body style="margin:0px; overflow:hidden;">
- <div id="bmusic" >
- <audio id="audio" preload="auto" controlsList="nodownload" tabindex="1" controls="controls" type="audio/ogg" >
- <source type="audio/ogg" src="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3">
- Sorry, your browser does not support HTML5 audio.
- </audio>
- <ul id="playlist" style="background:#000; height:150px; text-align:right; overflow-y:scroll;">
- <li ><a href="http://www.archive.org/download/bolero_69/Bolero.mp3">Ravel Bolero</a></li>
- <li class="active"><a href="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3">Moonlight Sonata - Beethoven</a></li>
- <li><a href="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">Canon in D Pachabel</a></li>
- <li><a href="http://www.archive.org/download/PatrikbkarlChamberSymph/PatrikbkarlChamberSymph_vbr_mp3.zip">patrikbkarl chamber symph</a></li>
- </ul>
- <script>
- var audio;
- var playlist;
- var tracks;
- var current;
- init();
- function init(){
- current = 0;
- audio = $('audio');
- playlist = $('#playlist');
- tracks = playlist.find('li a');
- len = tracks.length - 1;
- audio[0].volume = .30;
- audio[0].play();
- playlist.find('a').click(function(e){
- e.preventDefault();
- link = $(this);
- current = link.parent().index();
- run(link, audio[0]);
- });
- audio[0].addEventListener('ended',function(e){
- current++;
- if(current == len){
- current = 0;
- link = playlist.find('a')[0];
- }else{
- link = playlist.find('a')[current];
- }
- run($(link),audio[0]);
- });
- }
- function run(link, player){
- player.src = link.attr('href');
- par = link.parent();
- par.addClass('active').siblings().removeClass('active');
- audio[0].load();
- audio[0].play();
- }
- </script>
- </div>
- <iframe id="moonsframe" src="index.php"></iframe>
- </body>
- </html>