<div style="width:100%;height:0;padding-bottom:100%;position:relative;"><iframe src="https://giphy.com/embed/zC5U0KlyVpiC4vaY0V" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/mayhem-helsefyr-mayhemgg-zC5U0KlyVpiC4vaY0V">via GIPHY</a></p>
[MAYHEM] [EVOKERS] [SPUN] [KiTE]
https://www.youtube.com/watch?v=CPGuje0JYTA
https://steamcommunity.com/id/Helsefyr/
https://www.facebook.com/MAYHEM.GG
https://play.eslgaming.com/player/16649192/
<div style="width:100%;height:0;padding-bottom:100%;position:relative;"><iframe src="https://giphy.com/embed/qsAFF7VzSbPEA4OnJX" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/mayhem-myh-myhgg-qsAFF7VzSbPEA4OnJX">via GIPHY</a></p>
HTTP://MAYHEM.GG
HTTP://IMMORTALS.GG
HTTP://MISIFTSGAMING.GG
HTTP://FLORIDAMAYHEM.GG
HTTP://FLMUTINEERS.GG
<section id="section2">
<h2>2 players, 1 visualizer</h2>
<midi-player
src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@http://en.midimelody.ru/midi.php?str=%2Fm%2FMayhem%2FMayhem%20-%20De%20Mysteriis%20Dom%20Sathanas.mid"
sound-font visualizer="#section2 midi-visualizer">
</midi-player>
<midi-player
src="https://cdn.jsdelivr.net/gh/magenta/magenta-js@http://en.midimelody.ru/midi.php?str=%2Fm%2FMayhem%2FMayhem%20-%20De%20Mysteriis%20Dom%20Sathanas.mid"
sound-font visualizer="#section2 midi-visualizer">
</midi-player>
<midi-visualizer
type="piano-roll">
</midi-visualizer>
</section>
<script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.22.1/es6/core.js,npm/focus-visible@5,npm/html-midi-player@1.3.0"></script>
/* Custom player style */
#section3 midi-player {
display: block;
width: inherit;
margin: 4px;
margin-bottom: 0;
}
#section3 midi-player::part(control-panel) {
background: #ff5;
border: 2px solid #000;
border-radius: 10px 10px 0 0;
}
#section3 midi-player::part(play-button) {
color: #353;
border: 2px solid currentColor;
background-color: #4d4;
border-radius: 20px;
transition: all 0.2s;
content: "hello";
}
#section3 midi-player::part(play-button):hover {
color: #0a0;
background-color: #5f5;
border-radius: 10px;
}
#section3 midi-player::part(time) {
font-family: monospace;
}
/* Custom visualizer style */
#section3 midi-visualizer .piano-roll-visualizer {
background: #ffd;
border: 2px solid black;
border-top: none;
border-radius: 0 0 10px 10px;
margin: 4px;
margin-top: 0;
overflow: auto;
}
#section3 midi-visualizer svg rect.note {
opacity: 0.6;
stroke-width: 2;
}
#section3 midi-visualizer svg rect.note[data-instrument="0"] {
fill: #e22;
stroke: #500;
}
#section3 midi-visualizer svg rect.note[data-instrument="2"] {
fill: #2ee;
stroke: #055;
}
#section3 midi-visualizer svg rect.note[data-is-drum="true"] {
fill: #888;
stroke: #888;
}
#section3 midi-visualizer svg rect.note.active {
opacity: 0.9;
stroke: #000;
}
Read More ▾