midi player test, ignore if you see, this is a test for a horrorgifs.neocities.org update

test if you dare

Copy to the top of the page you would like to hear a midi in (NOTE TO AUTHOR:change filenames before release)


	  <script  type="module" src="https://horrorgifs.neocities.org/advanced_demo.js"></script>

    <link rel='stylesheet' href='https://horrorgifs.neocities.org/examples.css'>

define a midi to play on loop or use a playlist (randomly shuffled).

skipping this step will use the horrorgifs playlist if you wish to


     <script>window.midi="relative_path_to/yourmidi.mid"  </script>

OR


          <script>window.jsonmidi="relative_path_to/midiplaylist.json"  </script>

Copy this to wherever you would like to display midi player

copy it even if you wish the midi player to be invisible (use the display:hidden; style in the <div> with id="mplay" if you do wish for it to be invisible)


<div id="mplay" style="    display: flex;
    justify-content: center;">
   <div class="example_content" style="
    display: flex;
    flex-direction: column;">
     <div style="
    
    height: 94px;
    width: 489px;
    margin-left: 24px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;

    ">
       <div>
         <p id="message" class="miditext">Loading..</p>
       </div>
       <div>
         <input type="range" class="slider" min="0" max="1000" value="0" id="progress" style="border: 2px black solid;">
       </div>
     </div>
     <div>
       <img id="pause" src="https://horrorgifs.neocities.org/midiplayer/res/playbutton.png" class="button" style="filter: brightness(1);" draggable="false">
       <img src="https://horrorgifs.neocities.org/midiplayer/res/skipbutton.png" class="button" draggable="false" id="next" style="filter: brightness(1);">
       <img src="https://horrorgifs.neocities.org/midiplayer/res/downloadbutton.png" class="button" draggable="false" id="dwnld" style="filter: brightness(1);">
     </div>
   </div>
	</div>

midi json playlists look like this

["midi/easterparade2.mid","midi/herecomedpetercottontail.mid","midi/oldruggedcross.mid","midi/parade.mid"]

ensure users know to enable autoplay if they would like to hear the midi music, it rarely works without doing so