1<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <meta name="google" content="notranslate"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <title>drumbit | Online drum machine</title> <meta name="description" content="A very easy to use online drum machine. You can choose from various drum kits, create, save and edit your drum patterns and record it as audio files."> <link rel="canonical" href="https://drumbit.app"> <meta property="og:title" content="drumbit | online drum machine"> <meta property="og:site_name" content="drumbit"> <meta property="og:description" content="A very easy to use online drum machine. You can choose from various drum kits, create, save and edit your drum patterns and record it as audio files."> <meta property="og:url" content="https://drumbit.app"> <meta property="og:type" content="website"> <meta property="og:image" content="https://drumbit.app/about/images/drumbit-screenshot.png"> <meta property="og:video" content="https://youtu.be/doJoStKqTyE"> <meta property="fb:admins" content="100000252234991">
1<script async src="https://fundingchoicesmessages.google.com/i/pub-5747240303561676?ers=1" nonce="1JkTQ88o8rNgvgshEspdHQ"></script>
1
1<script nonce="1JkTQ88o8rNgvgshEspdHQ">!function(){function e(){if(!window.frames.googlefcPresent)if(document.body){const n=document.createElement("iframe");n.style="width: 0; height: 0; border: none; z-index: -1000; left: -1000px; top: -1000px;",n.style.display="none",n.name="googlefcPresent",document.body.appendChild(n)}else setTimeout(e,0)}e()}()</script>
1
1<script>!function(e,t,a,n,r){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var g=t.getElementsByTagName(a)[0],m=t.createElement(a),s="dataLayer"!=n?"&l="+n:"";m.async=!0,m.src="https://www.googletagmanager.com/gtm.js?id="+r+s,g.parentNode.insertBefore(m,g)}(window,document,"script","dataLayer","GTM-N3XC72G")</script>
1 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"> <link rel="stylesheet" href="css/A.lib-f44569a67b.css+app-58289c856d.css,Mcc.v9D2gMdAa2.css.pagespeed.cf.UYQPDWPAmY.css"/>
1<script data-ad-client="ca-pub-5747240303561676" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
1 </head> <body>
vendor: 69 bytes, line 1
1 <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=
1GTM-N3XC72G
vendor: 84 bytes, line 1
1" height="0" width="0" style="display:none;visibility:hidden"></iframe> </noscript>
1<nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <i class="fa fa-bars" aria-hidden="true"></i> </button> <div class="drumbit-logo"> <img src="images/drumbit-logo.png" alt="drumbit: a drum machine"> <h1>online drum machine</h1> </div> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="#" data-toggle="modal" data-target="#contributing"><i class="fa fa-heart-o" aria-hidden="true"></i> Give back</a></li> <li class="visible-lg"><a href="#" data-toggle="modal" data-target="#shortcuts"><i class="fa fa-keyboard-o" aria-hidden="true"></i> Shortcuts</a></li> <li><a href="https://drumbit.club/" target="_blank" rel="noopener"> <i class="fa fa-users" aria-hidden="true"></i> Club</a></li> <li class="hidden-lg"><a href="#" data-toggle="modal" data-target="#share"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li> <li><a href="about/"><i class="fa fa-info-circle" aria-hidden="true"></i> About</a></li> <li><a href="help/"><i class="fa fa-question-circle" aria-hidden="true"></i> Help Page</a></li> </ul> </div> </div> </nav> <div class="container-fluid"> <div class="row"> <div class="col-md-12 hidden-lg hidden-xs"> <div class="ad-slot1"> </div> </div> </div> <div class="row"> <div class="col-lg-2 visible-lg"> <div class="sidebar"> <div id="coffee2">
1<script type="text/javascript" src="https://storage.ko-fi.com/cdn/widget/Widget_2.js"></script>
1
1<script type="text/javascript">kofiwidget2.init("Buy Me a Coffee","#FFDD00","O5O017QRZ"),kofiwidget2.draw()</script>
1 </div> <div class="social"> <div aria-label="Facebook Like" role="button" class="fb-like" data-href="https://www.facebook.com/app.drumbit" data-action="like" data-show-faces="false" data-share="false" data-layout="button_count" data-colorscheme="dark"> </div> <a aria-label="Facebook Group" href="https://www.facebook.com/groups/drumbit" target="_blank" rel="noopener" title="Join drumbit's Group on Facebook"> <div class="fb-group"> <i class="fa fa-facebook-official" aria-hidden="true"></i> <span class="partial-hidden">Join</span> Group </div> </a> <div class="social-share"></div> </div> <div class="ad-slot2">
1<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
1 <ins class="adsbygoogle" style="display:inline-block;min-width:140px;max-width:160px;width:100%;height:320px" data-ad-client="ca-pub-5747240303561676" data-ad-slot="5654448345"></ins>
1<script>(adsbygoogle=window.adsbygoogle||[]).push({})</script>
1 </div> </div> </div> <div class="col-lg-8 col-md-12"> <div class="loader"></div> <div class="wrapper"> <div class="control"> <div class="master-control"> <p> <i class="vol-icon fa fa-volume-up" aria-hidden="true"></i> <span>Master volume</span> </p> <span class="tooltip-master-vol"></span> <div id="master-vol"></div> <p> <i class="metronome-icon" aria-hidden="true"></i> <span>Tempo</span> </p> <input aria-label="Tempo" id="tempo"> bpm <div class="swing"> <span class="swing-label">Swing</span> <span class="tooltip-swing-factor"></span> <div id="swing-factor"></div> </div> <div class="drum-kits"> <div class="preload-kit"> <img src="images/preloader.gif" alt="loader"> </div> <select id="kits" aria-label="Drum kits"></select> </div> <div class="impulse-responses"> <div class="preload-impulse"> <img src="images/preloader.gif" alt="loader"> </div> <select id="impulses" aria-label="Effects"></select> <div class="effects-level"> <span class="tooltip-convolver-level"></span> <div id="convolver-level"></div> </div> </div> <div class="demos-and-filters"> <select id="demos" aria-label="Demos"> <option value="none">No Demo</option> <option value="rock">Rock</option> <option value="rock2">Rock II</option> <option value="funk">Funk</option> <option value="funk2">Funk II</option> <option value="bossa">Bossa Nova</option> <option value="hip-hop">Hip-Hop</option> <option value="house">House</option> </select> <div class="filters-leds"> <div> <button aria-label="Low Pass" id="lowpass-led"></button> <span>Low</span> <button aria-label="High Pass" id="highpass-led"></button> <span>High Pass</span> </div> <div> <button aria-label="Compressor" id="compressor-led"></button> <span>Compressor</span> </div> </div> </div> <div class="keys-navigation"> <button id="keys-mode" aria-label="Keys Navigation"></button> <span>Keys Mode</span> <a aria-label="Keys Mode" href="#" data-toggle="modal" data-target="#keys-mode-help"><i class="fa fa-question-circle" aria-hidden="true"></i></a> </div> </div> <div class="visual-eq"> <span id="display-filename"></span> <div class="eq-colors"> <div class="eq-color" id="red"></div> <div class="eq-color" id="yellow"></div> <div class="eq-color" id="purple"></div> <div class="eq-color" id="green"></div> </div> <div id="marketing"> <div></div> </div> <canvas height="170" width="360" class="visualizer"> </canvas> </div> <div class="options"> <button tabindex="-1" class="btn-panels" id="panning" data-tooltip="Left-right distribution"><i class="fa fa-sliders" aria-hidden="true"></i> Panning</button> <button tabindex="-1" class="btn-panels" id="filtering" data-tooltip="Audio equalization"><i class="fa fa-filter" aria-hidden="true"></i> Filters</button> <button tabindex="-1" class="btn-panels" id="preferences" data-tooltip="Startup defaults"><i class="fa fa-cog" aria-hidden="true"></i> Preferences</button> <a tabindex="-1" id="plus" href="https://drumbit.club" target="_blank" rel="noopener" data-tooltip="drumbit Club"><i class="fa fa-users" aria-hidden="true"></i> Club</a> <a tabindex="-1" id="help" href="help/" target="_blank" data-tooltip="Help page"><i class="fa fa-question-circle" aria-hidden="true"></i> Help</a> </div> <div class="features"> <div class="author"> <img id="logo" src="images/drumbit.png" alt="drumbit logo"> <span>by <a href="https://pluraldev.com" target="_blank" rel="noopener">João Santos</a> </span> </div> <div class="row-a"> <div id="gen-wav">Generating sound file...</div> <div id="rec">REC <span id="minutes">00</span>: <span id="seconds">00</span> </div> <button aria-label="Open file" tabindex="-1" id="open" data-tooltip="Open file"> <i class="fa fa-folder-open" aria-hidden="true"></i> <input aria-label="Open File" type="file" id="data"> </button> <a aria-label="Save file" tabindex="-1" href="#" class="save" id="save" data-tooltip="Save file"> <i class="fa fa-floppy-o" aria-hidden="true"></i> </a> <div class="show-more"> <button aria-label="New drumbit" id="new" data-tooltip="New drumbit"><i class="fa fa-file" aria-hidden="true"></i></button> <button aria-label="File metadata" id="metadata" data-tooltip="File metadata"><i class="fa fa-list-alt" aria-hidden="true"></i></button> <button aria-label="Clear all" tabindex="-1" id="clear-all" data-tooltip="Clear all"><i class="fa fa-refresh" aria-hidden="true"></i></button> </div> <button aria-label="More" tabindex="-1" id="more" data-tooltip="More"> <i class="fa fa-ellipsis-v" aria-hidden="true"></i> </button> <button aria-label="Clear" tabindex="-1" id="clear" data-tooltip="Clear"> <i class="fa fa-undo" aria-hidden="true"></i> </button> <button aria-label="Record" tabindex="-1" data-tooltip="Record" id="record"> <i class="fa fa-circle" aria-hidden="true"></i> </button> </div> <div class="row-b"> <div class="copy-paste"> <span id="copy">Copy</span> <span id="paste">Paste</span> </div> <button id="pattern-0" class="patterns">1</button> <button id="pattern-1" class="patterns">2</button> <button id="pattern-2" class="patterns">3</button> <button id="pattern-3" class="patterns">4</button> <button aria-label="Play" id="play"> <i class="fa fa-play" aria-hidden="true"></i> </button> </div> </div> </div> <div class="machine"> <div id="sequencer"> <div class="preload-file"> <img src="images/preloader.gif" alt="loader"> </div> </div> </div> <div id="invalid-file-dialog" title="Open File"> <p></p> </div> <div id="reset-dialog" title="Reset"> <p> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This action will reset all settings to their defaults. </p> </div> <div id="clear-dialog" title="Clear all"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> <p> This action will clear all the patterns along with panning, volumes and pitches. </p> <label for="clear-show">Don't show again</label> <input type="checkbox" class="custom-check" id="clear-show" aria-label="Don't show again"> </div> <div id="new-dialog" title="New"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> <p> The current pattern is not saved. Proceed anyway? </p> <label for="new-show">Don't show again</label> <input type="checkbox" class="custom-check" id="new-show" aria-label="Don't show again"> </div> <div id="metadata-dialog" title="File Metadata"> <div class="form-group"> <label for="author">Author</label> <input type="text" id="author" class="form-control" aria-label="Author"> </div> <div class="form-group"> <label for="title">Title</label> <input type="text" id="title" class="form-control" aria-label="Title"> </div> <div class="form-group"> <label for="remarks">Remarks</label> <textarea id="remarks" rows="6" class="form-control" aria-label="Remarks"></textarea> </div> </div> </div> <div class="panel preferences-panel"> <span id="close-preferences" class="ui-icon ui-icon-circle-close"></span> <div> <div> <label for="default-master-vol">Master Volume</label> <input id="default-master-vol" aria-label="Master Volume"> </div> <div> <label for="default-tempo">Tempo</label> <input id="default-tempo" aria-label="Tempo"> </div> <div> <span class="lbl-default-kit">Default Kit</span> <select id="default-kit" aria-label="Default Kit"></select> </div> <div> <label for="default-keep-last">Keep the Last</label> <input type="checkbox" class="custom-check" id="default-keep-last" aria-label="Keep the Last"> <small>Keeps your last work after leaving the app</small> </div> <div> <label for="default-tooltips">Tooltips</label> <input type="checkbox" class="custom-check" id="default-tooltips" aria-label="Tooltips"> </div> <div> <label for="default-keys-mode">Keys Mode</label> <input type="checkbox" class="custom-check" id="default-keys-mode" aria-label="Keys Mode"> </div> </div> <button id="save-preferences" aria-label="OK">OK</button> <button id="reset" aria-label="Reset">Reset</button> </div> <div class="panel panning-panel"> <span id="close-panning" class="ui-icon ui-icon-circle-close"></span> <div class="trk-pans"> <p class="trk-name-0"></p> <p class="trk-name-1"></p> <p class="trk-name-2"></p> <p class="trk-name-3"></p> <p class="trk-name-4"></p> <p class="trk-name-5"></p> <p class="trk-name-6"></p> <p class="trk-name-7"></p> </div> <div id="pan"></div> </div> <div class="panel filtering-panel"> <span id="close-filters" class="ui-icon ui-icon-circle-close"></span> <select id="filters" aria-label="Filters"></select> <div class="filter"> <div id="compressor"> <div id="add-compressor"> <fieldset> <legend class="sr-only">Add Low-pass</legend> <input type="radio" id="compressor-on" name="compressor" aria-label="Compressor ON"> <label for="compressor-on">ON</label> <input type="radio" id="compressor-off" name="compressor" checked="checked" aria-label="Compressor OFF"> <label for="compressor-off">OFF</label> </fieldset> </div> <div class="filter-levels"> <div class="filter-level"> <strong>Threshold</strong> <span class="tooltip-compressor-threshold"></span> <div id="compressor-threshold"></div> <span class="filter-unit">dB</span> </div> <div class="filter-level"> <strong>Ratio</strong> <span class="tooltip-compressor-ratio"></span> <div id="compressor-ratio"></div> <span class="filter-unit">:1</span> </div> <div class="filter-level"> <strong>Attack</strong> <span class="tooltip-compressor-attack"></span> <div id="compressor-attack"></div> <span class="filter-unit">ms</span> </div> <div class="filter-level"> <strong>Release</strong> <span class="tooltip-compressor-release"></span> <div id="compressor-release"></div> <span class="filter-unit">ms</span> </div> <div class="filter-level"> <strong>Knee</strong> <span class="tooltip-compressor-knee"></span> <div id="compressor-knee"></div> <span class="filter-unit">dB</span> </div> </div> </div> <div id="lowpass"> <div id="add-lowpass"> <fieldset> <legend class="sr-only">
1Add Lowpass</legend> <input type="radio" id="lowpass-on" name="lowpass" aria-label="Low Pass ON"> <label for="lowpass-on">ON</label> <input type="radio" id="lowpass-off" name="lowpass" checked="checked" aria-label="Low Pass OFF"> <label for="lowpass-off">OFF</label> </fieldset> </div> <div class="filter-levels"> <div class="filter-level"> <strong>Frequency</strong> <span class="tooltip-lowpass-frequency"></span> <div id="lowpass-frequency"></div> <span class="filter-unit">Hz</span> </div> <div class="filter-level"> <strong>Q</strong> <span class="tooltip-lowpass-q"></span> <div id="lowpass-q"></div> <span class="filter-unit"></span> </div> </div> </div> <div id="highpass"> <div id="add-highpass"> <fieldset> <legend class="sr-only">Add High-pass</legend> <input type="radio" id="highpass-on" name="highpass" aria-label="High Pass ON"> <label for="highpass-on">ON</label> <input type="radio" id="highpass-off" name="highpass" checked="checked" aria-label="High Pass OFF"> <label for="highpass-off">OFF</label> </fieldset> </div> <div class="filter-levels"> <div class="filter-level"> <strong>Frequency</strong> <span class="tooltip-highpass-frequency"></span> <div id="highpass-frequency"></div> <span class="filter-unit">Hz</span> </div> <div class="filter-level"> <strong>Q</strong> <span class="tooltip-highpass-q"></span> <div id="highpass-q"></div> <span class="filter-unit"></span> </div> </div> </div> </div> </div> </div> <div class="col-lg-2"> <div class="sidebar ad-slot3">
1<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
1 <ins class="adsbygoogle" style="display:inline-block;min-width:140px;max-width:420px;width:100%;height:570px" data-ad-client="ca-pub-5747240303561676" data-ad-slot="8607914747"></ins>
1<script>(adsbygoogle=window.adsbygoogle||[]).push({})</script>
1 </div> </div> </div> </div> <footer> <div class="social-media"> <p><i class="fa fa-heart" aria-hidden="true"></i> Social Media</p> <a aria-label="Facebook Page" href="https://www.facebook.com/app.drumbit" target="_blank" rel="noopener"><i class="fa fa-facebook-official" aria-hidden="true"></i></a> <a aria-label="Youtube Channel" href="https://www.youtube.com/c/drumbit" target="_blank" rel="noopener"><i class="fa fa-youtube" aria-hidden="true"></i></a> </div> <p> <i class="fa fa-copyright"></i> <span id="year">2018</span> João Santos <i class="fa fa-circle" aria-hidden="true"></i> <a href="#" data-toggle="modal" data-target="#contact"> Contact</a> <i class="fa fa-circle" aria-hidden="true"></i> <a href="#" data-toggle="modal" data-target="#privacy-policy">Privacy Policy</a> <i class="fa fa-circle" aria-hidden="true"></i> <a href="#" data-toggle="modal" data-target="#newsletter">Newsletter</a> </p> </footer> <div class="modal fade" tabindex="-1" role="dialog" id="shortcuts"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <i class="fa fa-keyboard-o" aria-hidden="true"></i> Shortcut keys <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <table class="table table-bordered"> <tr> <th scope="col">Keys</th> <th scope="col">Action</th> </tr> <tr> <td>Space bar</td> <td>Starts/stops playing</td> </tr> <tr> <td>Ctrl + Space bar</td> <td>Starts/stops recording</td> </tr> <tr> <td>Ctrl + c</td> <td>Copy selected pattern</td> </tr> <tr> <td>Ctrl + v</td> <td>Paste into selected pattern</td> </tr> <tr> <td>Shift + o</td> <td>Opens drumbit file</td> </tr> <tr> <td>Shift + s</td> <td>Saves drumbit file</td> </tr> <tr> <td>Shift + s</td> <td>Saves drumbit file</td> </tr> <tr> <td>Shift + n</td> <td>New drumbit</td> </tr> <tr> <td>Shift + m</td> <td>Opens Metadata Information</td> </tr> <tr> <td>Shift + l</td> <td>Clear selected pattern</td> </tr> <tr> <td>Shift + a</td> <td>Clears all the patterns along with panning, volumes and pitches</td> </tr> <tr> <td>Shift + g</td> <td>Opens Panning</td> </tr> <tr> <td>Shift + f</td> <td>Opens Filters</td> </tr> <tr> <td>Shift + p</td> <td>Opens preferences</td> </tr> <tr> <td>Shift + h</td> <td>Opens help page</td> </tr> <tr> <td>Shift + k</td> <td>Toggles Keys mode</td> </tr> <tr> <td>1 to 4 (Numpad)</td> <td>Selects pattern 1 to 4</td> </tr> <tr> <td>Escape</td> <td>Closes panels (Panning, Filters, Preferences) or context menus</td> </tr> </table> <div class="h3">Keys Mode</div> <table class="table table-bordered"> <tr> <th scope="col">Keys</th> <th scope="col">Action</th> </tr> <tr> <td>Arrows right and left</td> <td>Navigates through the steps</td> </tr> <tr> <td>Arrows up and down</td> <td>Navigates through the tracks</td> </tr> <tr> <td>x or 0 (Numpad)</td> <td>Hits the selected step</td> </tr> </table> </div> </div> </div> </div> <div class="modal fade" id="keys-mode-help" tabindex="-1" role="dialog" aria-label="Keys Mode Help" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <i class="fa fa-question-circle" aria-hidden="true"></i> Keys Mode <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <p> Let's you use the keyboard arrow keys to navigate the step sequencer and select the desired steps using either "x" or numpad "0" to hit the selected steps. </p> <table class="table table-bordered"> <tr> <th scope="col">Keys</th> <th scope="col">Action</th> </tr> <tbody> <tr> <td>Arrows right and left</td> <td>Navigates through the steps</td> </tr> <tr> <td>Arrows up and down</td> <td>Navigates through the tracks</td> </tr> <tr> <td>x or 0 (Numpad)</td> <td>Hits the selected step</td> </tr> </tbody> </table> <strong class="h4"><i class="fa fa-lightbulb-o" aria-hidden="true"></i> Hint</strong> <p> You can use it in conjunction with the numpad numbers 1 to 4 in order to navigate through the patterns and copy and past them using Ctrl + c, Ctrl + v. </p> </div> </div> </div> </div> <div class="modal fade" id="privacy-policy" tabindex="-1" role="dialog" aria-label="Share" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <i class="fa fa-file-text-o" aria-hidden="true"></i> Privacy Policy <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <div class="privacy-policy"> <div class="text-center"> <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw" aria-hidden="true"></i> </div> <span class="sr-only">Loading...</span> </div> </div> </div> </div> </div> <div class="modal fade" id="share" tabindex="-1" role="dialog" aria-label="Share" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <i class="fa fa-share-alt" aria-hidden="true"></i> Social Sharing <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <div class="social-share"></div> </div> </div> </div> </div> <div class="modal fade" id="contributing" tabindex="-1" role="dialog" aria-label="Contributing" aria-hidden="true"> <div class="modal-dialog modal-md"> <div class="modal-content"> <div class="modal-header"> <i class="fa fa-heart-o" aria-hidden="true"></i> Give back <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <p> Hello! My name is João Santos. I'm a web developer who loves creating apps that help people create music or getting better as musicians. </p> <p> If you are enjoying drumbit feel free to show me your appreciation by buying me a coffee. </p> <div id="coffee">
1<script type="text/javascript" src="https://storage.ko-fi.com/cdn/widget/Widget_2.js"></script>
1
1<script type="text/javascript">kofiwidget2.init("Buy Me a Coffee","#FFDD00","O5O017QRZ"),kofiwidget2.draw()</script>
1 </div> <p> You can also support drumbit development by making a contribution. This allows me to spend less time worrying about putting food on the table and more time making this app better. No matter how much, I'm sure it will make a difference. </p> <a id="paypal" class="contributing" href="https://www.paypal.me/jsdeveloper" target="_blank"><img src="images/paypal.png" alt="PayPal Contribute"> </a> <p class="h4"> More music related apps that I've created </p> <div class="more-apps"> <a href="https://musictools.app/auralis/" target="_blank"><img src="images/auralis.png" alt="Auralis"></a> <a href="https://musictools.app/scales-and-modes/" target="_blank"><img src="images/scales-modes.png" alt="Scales and Modes"></a> <a href="https://musictools.app/guitar-tuner/" target="_blank"><img src="images/guitar-tuner.png" alt="Guitar Tuner"></a> </div> </div> </div> </div> </div> <div class="modal fade" id="newsletter" tabindex="-1" role="dialog" aria-label="Newsletter" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <form class="subscribe-form"> <div class="modal-header"> <i class="fa fa-newspaper-o" aria-hidden="true"></i> Newsletter <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <div class="form-group"> <input type="email" class="form-control" name="email" required placeholder="Enter your email address" aria-label="Email"> </div> <button type="submit" class="btn btn-default pull-right"><i class="fa fa-check" aria-hidden="true"></i> Subscribe</button> <div class="clearfix"></div> </div> </form> </div> </div> </div> <div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-label="Contact" aria-hidden="true"> <div class="modal-dialog modal-md"> <div class="modal-content"> <form class="contact-form"> <div class="modal-header"> <i class="fa fa-envelope-o" aria-hidden="true"></i> Contact <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <div class="form-group"> <label for="c-name">Name</label> <input type="text" id="c-name" class="form-control" name="name" required="required" placeholder="Enter your name" aria-label="Name"> </div> <div class="form-group"> <label for="c-email">Email</label> <input type="email" id="c-email" class="form-control" name="email" required="required" placeholder="Enter your email" aria-label="Email"> </div> <div class="form-group"> <label for="c-subject">Subject</label> <input type="text" id="c-subject" class="form-control" name="subject" placeholder="Enter a subject" aria-label="Subject"> </div> <div class="form-group"> <label for="c-message">Message</label> <textarea id="c-message" class="form-control" name="message" required="required" placeholder="Write your message" aria-label="Message"></textarea> </div> </div> <div class="modal-footer"> <button type="submit" class="btn btn-default pull-right"> <i class="fa fa-paper-plane" aria-hidden="true"></i> <i class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></i> Send </button> </div> </form> </div> </div> </div>
1<script src="js/lib-819e38190d.js.pagespeed.ce.gZ44GQ0LH2.js"></script>
1
1<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
1
1<script src="js/recorderWorker.js+app-d7f22bc615.js.pagespeed.jc.uBWBCTcklS.js"></script>
1<script>eval(mod_pagespeed_zKlWxXMc2j);</script>
1
1<script>eval(mod_pagespeed_GLDLL$0zjr);</script>
1 </body> </html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.