Customisable HTML 5 Online Audio Mixer JCMIX V1.0.4

By Realstrings

Every musician's website should have one! This online audio mixer works in all recent browsers and on mobile devices, ideal for presenting your music beyond the usual stereo mix. I use it on my site to show how I deliver my recordings.

Play, edit, record and save your mixes, all within the browser.

It's simple to integrate into any website, only very basic HTML knowledge required (it's mainly copy and paste).

In exchange for a small donation (10 pounds/euros/dollars or whatever you can afford) you can download the files you need to run the mixer on your own site. The money you donate goes to Samaritans.

Read more about it here .

Donating through JustGiving is simple, fast and totally secure. Your details are safe with JustGiving – they’ll never sell them on or send unwanted emails. Once you donate, they’ll send your money directly to the charity. So it’s the most efficient way to donate – saving time and cutting costs for the charity.

Please see the demo below. To get the code scroll to the bottom of the page.

Fill out your details, donate and get the code

    Implementation

    Below is a basic overview of the installation, to demonstrate how easy it is. For the full documentation, please click here.

    The mixer is very easy to implement into your website. Simply include the CSS and Javascript files, and a <div id="jcmix"> with the following data attributes where ever you would like the mixer to display:

    You can add any number of tracks inside the jcmix div, by adding child <div class="track">'s with the following data attributes:

    Here's an example of a full HTML page which includes the mixer:

    
    
                    <!doctype html>
                    <html lang="en">
    
                    <head>
                      <meta charset="utf-8">
                      <title>Mixer</title>
                      <link rel="stylesheet" type="text/css" href="jcmix-v1.0.3.min.css"> <!-- Include the mixer style sheet -->
                    </head>
    
                    <body>
    
                        <!-- Mixer body starts here -->
    
                        <div id="jcmix" data-title="Love Theme By Aaron Sapp" data-record="true">
    
                            <div class="track" 
                                data-url="strings1.mp3" 
                                data-label="Strings 1"  
                                data-start-muted="false" 
                                data-initial-volume="0.6"   
                                data-initial-pan="0"  > 
                            </div>
    
                            <div class="track" 
                                data-url="strings2.mp3" 
                                data-label="Strings 2" 
                                data-start-muted="false" 
                                data-initial-volume="0.8"   
                                data-initial-pan="90" >
                            </div>
    
                            <div class="track" 
                                data-url="strings3.mp3" 
                                data-label="Strings 3" 
                                data-start-muted="false" 
                                data-initial-volume="0.85"  
                                data-initial-pan="-60">
                            </div>
    
                        </div>   
    
                        <!-- Mixer body ends here -->
    
                        <script src="jcmix-v1.0.3.min.js"></script> <!-- Include the mixer javascript file -->
    
                    </body>
                    </html>