jQuery SoundCloud 鼓点音乐面板

Jquery SoundCloud Mini-board Source: http://whoismakro.com/

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1315
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

jQuery.noConflict();
jQuery(document).ready(function($) {
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        alert('sorry this only works on desktop :/');
    }

$('audio').prop("volume", 0.5);

function randomColor() {
        var ranNumber = Math.floor((Math.random() * 4) + 1);

if (ranNumber === 1) {
            $('html').addClass('bg1');
        }

if (ranNumber === 2) {
            $('html').addClass('bg2');
        }

if (ranNumber === 3) {
            $('html').addClass('bg3');
        }

if (ranNumber === 4) {
            $('html').addClass('bg4');
        }
    }

//soundcloud drum loop
    SC.initialize({
        client_id: '3440e335a358458913d573d82dc6dde3'
    });

SC.stream('/tracks/155465305', function(sound) {
        $(document).on('keydown', function(event) {
            event.preventDefault();
            if (event.keyCode === 65) { //a
                sound.play();
            }

if (event.keyCode === 83) { //s
                sound.pause();
            }

if (event.keyCode === 68) { //d
                sound.stop();
            }
        });
    });

$(document).on('keydown', function(event) {
        switch (event.keyCode) {
            case 103: //7
                $('#clap1 audio').get(0).play();
                $('#clap1').addClass('active_btn');
                randomColor();
                break;
            case 104: //8
                $('#clap2 audio').get(0).play();
                $('#clap2').addClass('active_btn');
                randomColor();
                break;
            case 105: //9
                $('#snare1 audio').get(0).play()
                $('#snare1').addClass('active_btn');
                randomColor();
                break;
            case 100: //4
                $('#wub1 audio').get(0).play();
                $('#wub1').addClass('active_btn');
                randomColor();
                break;
            case 101: //5
                $('#wub2 audio').get(0).play();
                $('#wub2').addClass('active_btn');
                randomColor();
                break;
            case 102: //6
                $('#wub3 audio').get(0).play();
                $('#wub3').addClass('active_btn');
                randomColor();
                break;
            case 97: //1
                $('#wub4 audio').get(0).play();
                $('#wub4').addClass('active_btn');
                randomColor();
                break;
            case 98: //2
                $('#effect1 audio').get(0).play();
                $('#effect1').addClass('active_btn');
                randomColor();
                break;
            case 99: //3
                $('#effect2 audio').get(0).play();
                $('#effect2').addClass('active_btn');
                randomColor();
                break;

}
    });

$(document).on('keyup', function(event) {
        switch (event.keyCode) {
            case 103: //7
                $('#clap1').removeClass('active_btn');
                $('#clap1 audio').prop("currentTime", 0);
                $('#clap1 audio').trigger('pause');
                $('html').removeClass();
                break;
            case 104: //8
                $('#clap2').removeClass('active_btn');
                $('#clap2 audio').prop("currentTime", 0);
                $('#clap2 audio').trigger('pause');
                $('html').removeClass();
                break;
            case 105: //9
                $('#snare1').removeClass('active_btn');
                $('#snare1 audio').prop("currentTime", 0);
                $('#snare1 audio').trigger('pause');
                $('html').removeClass();
                break;
            case 100: //4
                $('#wub1').removeClass('active_btn');
                $('#wub1 audio').prop("currentTime", 0);
                $('#wub1 audio').trigger('pause');
                $('html').removeClass();
                break;
            case 101: //5
                $('#wub2').removeClass('active_btn');
                $('#wub2 audio').prop("currentTime", 0);
                $('#wub2 audio').trigger('pause');
                $('html').removeClass();
                break;
            case 102: //6
                $('#wub3').removeClass('active_btn');
                $('#wub3 audio').prop("currentTime", 0);
                $('#wub3 audio').trigger('pause');
                $('html').removeClass();
                break;
            case 97: //1
                $('#wub4').removeClass('active_btn');
                $('#wub4 audio').prop("currentTime", 0);
                $('#wub4 audio').trigger('pause');
                $('html').removeClass();
                break;
            case 98: //2
                $('#effect1').removeClass('active_btn');
                $('#effect1 audio').prop("currentTime", 0);
                $('#effect1 audio').trigger('pause');
                $('html').removeClass();
                break;
            case 99: //3
                $('#effect2').removeClass('active_btn');
                $('#effect2 audio').prop("currentTime", 0);
                $('#effect2 audio').trigger('pause');
                $('html').removeClass();
                break;

}
    });

});

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Orbitron:400,500,700,900);
html {
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    background: -webkit-radial-gradient(circle, #16222a 10%, #3a6073 90%);
    background: -moz-linear-radial(left, #16222a 10%, #3a6073 90%);
    background: -o-radial-gradient(circle, #16222a 10%, #3a6073 90%);
    background: linear-radial-gradient(circle, #16222a 10%, #3a6073 90%);
}
*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
    font-family: 'Orbitron', sans-serif;
}
.clearfix {
    width: 100%;
    min-height: 10px;
    clear: both;
}
#title,
a {
    text-align: center;
    color: #fff;
    box-shadow: none;
    text-shadow: #fff 0px 0px 10px, #fff 0px 0px 20px, #fff 0px 0px 30px, #0ff 0px 0px 40px, #0ff 0px 0px 70px, #0ff 0px 0px 80px, #0ff 0px 0px 100px;
    transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: none;
    transform: none;
    -webkit-transform-origin: 50% 50% 0px;
    transform-origin: 50% 50% 0px;
}
h4 {
    margin-top: -15px;
    margin-bottom: 5px;
}
a {
    font-size: 12px;
}
#deck {
    width: 800px;
    margin: 25px auto;
    height: auto;
    overflow: hidden;
}
#deck * {
    height: auto;
    overflow: hidden;
    width: 100%;
}
#deck #left_deck {
    width: 30%;
    float: left;
}
#deck #left_deck h1,
#deck #left_deck h2,
#deck #left_deck h3,
#deck #left_deck h4,
#deck #left_deck h5,
#deck #left_deck h6,
#deck #left_deck p,
#deck #left_deck li,
#deck #left_deck tbody td {
    color: #fff;
}
#deck #left_deck .control_key {
    border: 1px solid #12fff7;
    margin-top: 15px;
    padding: 10px;
    letter-spacing: 1px;
}
#deck #left_deck h3 {
    margin-left: 10px;
    font-size: 16px;
    color: #12fff7;
}
#deck #left_deck td {
    font-size: 12px;
    line-height: 20px;
    width: 33.33333%;
    text-align: center;
}
#deck #right_deck {
    width: 70%;
    text-align: center;
}
#deck #right_deck .btn {
    width: 100px;
    height: 100px;
    display: inline-block;
    border: 1px solid #b3ffab;
    margin: 15px;
    border-radius: 6px;
    background: -webkit-radial-gradient(circle, #b3ffab 10%, #12fff7 90%);
    background: -moz-linear-radial(left, #b3ffab 10%, #12fff7 90%);
    background: -o-radial-gradient(circle, #b3ffab 10%, #12fff7 90%);
    background: linear-radial-gradient(circle, #b3ffab 10%, #12fff7 90%);
    -moz-box-shadow: 0px 0px 5px 5px rgba(0, 255, 255, 0.5);
    -webkit-box-shadow: 0px 0px 5px 5px rgba(0, 255, 255, 0.5);
    box-shadow: 0px 0px 5px 5px rgba(0, 255, 255, 0.5);
    text-align: center;
}
.active_btn {
    background: #b3ffab !important;
}
.bg1 {
    background: -webkit-radial-gradient(circle, #b3ffab 10%, #12fff7 90%);
    background: -moz-linear-radial(left, #b3ffab 10%, #12fff7 90%);
    background: -o-radial-gradient(circle, #b3ffab 10%, #12fff7 90%);
    background: linear-radial-gradient(circle, #b3ffab 10%, #12fff7 90%);
}
.bg2 {
    background: -webkit-radial-gradient(circle, #aaffa9 10%, #11ffbd 90%);
    background: -moz-linear-radial(left, #aaffa9 10%, #11ffbd 90%);
    background: -o-radial-gradient(circle, #aaffa9 10%, #11ffbd 90%);
    background: linear-radial-gradient(circle, #aaffa9 10%, #11ffbd 90%);
}
.bg3 {
    background: -webkit-radial-gradient(circle, #fc354c 10%, #0abfbc 90%);
    background: -moz-linear-radial(left, #fc354c 10%, #0abfbc 90%);
    background: -o-radial-gradient(circle, #fc354c 10%, #0abfbc 90%);
    background: linear-radial-gradient(circle, #fc354c 10%, #0abfbc 90%);
}
.bg4 {
    background: -webkit-radial-gradient(circle, #aa076b 10%, #61045f 90%);
    background: -moz-linear-radial(left, #aa076b 10%, #61045f 90%);
    background: -o-radial-gradient(circle, #aa076b 10%, #61045f 90%);
    background: linear-radial-gradient(circle, #aa076b 10%, #61045f 90%);
}

HTML

<div id="title">
    <h1>SoundCloud Drumboard</h1>
</div>

<div id="deck">
    <div id="left_deck">
        <div class="control_key">
            <h3>Play Sounds</h3>
            <table>
                <tbody>
                    <tr>
                        <td>Keypad
                            <br/>7</td>
                        <td>Keypad
                            <br/>8</td>
                        <td>Keypad
                            <br/>9</td>
                    </tr>
                    <tr>
                        <td>Keypad
                            <br/>4</td>
                        <td>Keypad
                            <br/>5</td>
                        <td>Keypad
                            <br/>6</td>
                    </tr>
                    <tr>
                        <td>Keypad
                            <br/>1</td>
                        <td>Keypad
                            <br/>2</td>
                        <td>Keypad
                            <br/>3</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="clearfix"></div>
        <div class="control_key">
            <h3>Start, Pause, Stop Drum Loop</h3>
            <table>
                <tbody>
                    <tr>
                        <td>Start
                            <br/>A Key</td>
                        <td>Pause
                            <br/>S Key</td>
                        <td>Stop
                            <br/>D Key</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div id="right_deck">
        <div id="btn_container">

<div id="clap1" class="btn">
                <audio>
                    <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42159/clap1.wav" type="audio/wav">
                        Your browser does not support the audio element.
                </audio>
            </div>

</div>
    </div>
</div>

Jquery SoundCloud Mini-board Source: http://whoismakro.com/

编辑器支持Emmet

快捷键

Jquery SoundCloud Mini-board Source: http://whoismakro.com/

jQuery.nouislider.js 温度控制器

HTML5+jQuery.waypoints旅行者的时间表页面模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：