2012-10-16 23:45:44

License: MIT License

Fork: 0

Fav: 8

View: 10006

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 655 lines
HTML 105 lines
CSS 206 lines

Trance Metal Generator

トランスメタルジェネレータ（Web Audio API ver）

@author itoz ( http://www.romatica.com/ )

ドラッグ＆ドロップだけで曲が作れるシーケンサ

Chrome 最新版、Safari6 以上のみ再生可

update

[2012.10.3] SoundJS から Web Audio API に変更。

遊び方

上部のサムネイルを下部にドラッグ＆ドロップ
再生ボタンで再生
手っ取り早く遊んでみたい人は「SET SAMPLE」ボタンから

Trance Metal Generato（トランスメタルジェネレータ）
jQuery v1.8.0

/**
 *============================================================
 * Trance Metal Generator (Web Audio API ver)
 * （トランスメタルジェネレーター）
 *
 * @author itoz ( http://www.romatica.com/ )
 *
 *============================================================
 */

var ASSETS_DIR          = "http://www.romatica.com/dev/jsdoit/TranceMetalGeneratorQ/images/";
var PREVIWE_BUTTON_URL  = ASSETS_DIR + "previewButton.png";
var SOUNDS_DIR          = "sounds/mp3/";
var TRACK_TIME          = 5630;

/**sound IDs*/
var SOUND_IDS = [ "00", "01", "02"
                , "10", "11", "12"
                , "20", "21", "22"];
/**thumb IDs*/
var THUMB_IDS = [ "00", "01", "02"
                , "10", "11", "12"
                , "20", "21", "22"
                , "30", "31", "32"];
/**sound Names*/
var SOUND_NAMES = [
      "drum_0"  , "drum_1"  , "drum_2"
    , "synce_0" , "synce_1" , "synce_2"
    , "guitar_0", "guitar_1", "guitar_2"
]

//_____________________________________________________________________

/**Sound URL*/
var soundURL = new Object();
/** ThumbImages*/
var thumbURL = new Object();
/** ThumbImages*/
var playObject = new Object();

//_____________________________________________________________________
var isLoadComplete = false;
var loadingArea;
var loadingMessage;
//_____________________________________________________________________

var bufferLoader;
var soundSources = {};
var soundBuffers = {};

//_____________________________________________________________________

var context;
var analyser;
var timeDomainData;

//_____________________________________________________________________

var isLoop = true;
var mainSoundIdArray = [];
var nowPreviewId = null;
var trackCount = 0;
var trackInterval;

//_____________________________________________________________________

var currentLine;
var currentLineXposStep = 60;
var currentLineTrackX = 0;
var currentLineStartTime;
var currentLinetimer;

//_____________________________________________________________________

//---------------------------------------------------------------------
//
// initialize
//
//---------------------------------------------------------------------

/**
 *  initialize
 */
function initialize() {
    createAssetsURLs();
    soundLoadStart();
}
/**
 * assets url
 */
function createAssetsURLs() {
    for (var i = 0; i < SOUND_IDS.length; i++) {
        var id = SOUND_IDS[i];
        soundURL[id] = SOUNDS_DIR + SOUND_NAMES[i] + ".mp3";
        thumbURL[id] = ASSETS_DIR + "bg_" + SOUND_NAMES[i] + ".png";
    }
  //  return ;
    //jsdoit 投稿用
    soundURL["00"] = "http://jsrun.it/assets/z/y/0/1/zy01Y.mp3";//SOUNDS_DIR + "drum_0.mp3";
    soundURL["01"] = "http://jsrun.it/assets/m/8/2/k/m82kx.mp3";//SOUNDS_DIR + "drum_1.mp3";
    soundURL["02"] = "http://jsrun.it/assets/b/a/d/T/badTY.mp3";//SOUNDS_DIR + "drum_2.mp3";
    soundURL["10"] = "http://jsrun.it/assets/p/H/e/Q/pHeQ5.mp3";//SOUNDS_DIR + "synce_0.mp3";
    soundURL["11"] = "http://jsrun.it/assets/g/J/b/L/gJbLo.mp3";//SOUNDS_DIR + "synce_1.mp3";
    soundURL["12"] = "http://jsrun.it/assets/v/C/J/B/vCJBY.mp3";//SOUNDS_DIR + "synce_2.mp3";
    soundURL["20"] = "http://jsrun.it/assets/q/F/d/T/qFdTA.mp3";//SOUNDS_DIR + "guitar_0.mp3";
    soundURL["21"] = "http://jsrun.it/assets/r/j/x/T/rjxTV.mp3";//SOUNDS_DIR + "guitar_1.mp3";
    soundURL["22"] = "http://jsrun.it/assets/o/o/6/F/oo6Fb.mp3";//SOUNDS_DIR + "guitar_2.mp3";

}

//---------------------------------------------------------------------
//
// sound loading
//
//---------------------------------------------------------------------

/**
 * サウンドロードスタート
 */
function soundLoadStart() {
    if (!loadingArea) loadingArea = $("#loadArea");
    if (!loadingMessage) loadingMessage = $("#loadMessage");
    loadingMessage.text("loading sounds");

try {
        context = new webkitAudioContext();
    }
    catch(e) {
        alert('このブラウザでは再生することができません');
        loadingArea.text("Web Audio API is not supported in this browser");
        return ;
    }
    analyser = context.createAnalyser();
    analyser.connect(context.destination);
    timeDomainData = new Uint8Array(analyser.frequencyBinCount);

var soundURLArray = [];
    for (var i = 0; i < SOUND_IDS.length; i++) soundURLArray.push(soundURL[SOUND_IDS[i]]);
    bufferLoader = new BufferLoader(
        context
        , soundURLArray
        , soundLoadComplete
    );
    bufferLoader.onProgress = soundLoadProgress;
    bufferLoader.load();
}

/**
 * サウンドロードプログレス
 */
function soundLoadProgress(loadCount, loadLength) {
    var parsent = Math.floor((  loadCount / loadLength   ) * 100);
    if (loadingMessage) loadingMessage.text("loading sounds " + (parsent) + "%");
}

/**
 * サウンドロードコンプリート
 */
function soundLoadComplete(bufferList) {
    for (var i = 0; i < SOUND_IDS.length; i++) {
        var id = SOUND_IDS[i];
        soundBuffers[id] = bufferList[i];
    }
    isLoadComplete = true;
    setLayout();
}

//---------------------------------------------------------------------
//
// sound controll
//
//---------------------------------------------------------------------

/**
 * サウンドを鳴らす
 * @param id
 */
function playSoundById(id) {
    var source = context.createBufferSource();
    source.buffer = soundBuffers[id];
    source.connect(context.destination);
    source.noteOn(0);
    source.connect(analyser);
    soundSources[id] = source;
}

/**
 * すべてのサウンドをストップ
 */
function stopSounds() {
    for (var i = 0; i < SOUND_IDS.length; i++) {
        var id = SOUND_IDS[i];
        stopSoundById(id);
    }
}

/**
 * サウンドをストップ
 * @param id
 */
function stopSoundById(id) {
    var source = soundSources[id];
    if (source) source.noteOff(0);
}
//---------------------------------------------------------------------
//
// timeline controll
//
//---------------------------------------------------------------------

/**
 * タイムライン再生する
 */
function startTimeline() {
    stopThumb();
    if (playObject == null) return;
    trackCount = 0;
    mainSoundIdArray = createMainSoundArray(playObject);
    doSound();
    setPlayMode();
}

/**
 * タイムラインストップする
 */
function stopTimeline() {
    clearTimeout(trackInterval);
    currentLineStop();
    stopThumb();
    setStopMode();
}

/**
 * サウンドID配列化
 * @param value
 * @return {Array}
 */
function createMainSoundArray(value) {
    var arr = [];
    for (var i  in value) {
        var id = (i).toString();
        var idHeadInt = Math.floor(id.charAt(0));
        if (arr[idHeadInt] == null) arr[idHeadInt] = [];
        arr[idHeadInt].push(value[i]);
    }
    for (var j = 0; j < 4; j++) if (arr[ j] == null) arr[ j] = [];
    return arr;
}

/**
 * 1トラック分のサウンドを鳴らす
 */
function doSound() {
    // 最後に到達したか
    if (trackCount == mainSoundIdArray.length) {
        if (isLoop) {
            trackCount = 0;
            //ラインの位置初期化
            currentLineSetPosition(0);
        }
        else {
            stopTimeline();
            return;
        }
    }
    // 縦列分のデータ
    var barArray = mainSoundIdArray[trackCount];
    if (barArray == null)  barArray = [];
    for (var i = 0; i < barArray.length; i++) {
        var sndId = barArray[i].toString();
        if (sndId) playSoundById(sndId);            // 再生
    }
    var timerCount = trackCount % mainSoundIdArray.length;
    currentLineSetPosition((455 / 4) * timerCount);         //★ラインエリア頭合わせ

trackInterval = setTimeout('timerCompleteHandler()', TRACK_TIME);
    trackCount += 1;
}

/**
 * 縦トラック分インターバル終了
 */
function timerCompleteHandler() {
    doSound();
}

//---------------------------------------------------------------------
//
// thumb controll
//
//---------------------------------------------------------------------

/**
 * サムネイル再生
 * @param obj
 */
function playThumb(obj) {
    //なにか再生されている
    if (nowPreviewId != null) {
        //再生されているのが自分自身だった
        if (nowPreviewId == obj.soundId) {
            //ストップしてリターン
            stopThumb();
            return;
        }
        stopThumb();
    }
    nowPreviewId = obj.soundId;
    $("#" + nowPreviewId).css("opacity", "0.5");
    playSoundById(nowPreviewId);
}

/**
 *  全サムネイル停止
 */
function stopThumb() {
    currentArrowMove(0)
    for (var i = 0; i < SOUND_IDS.length; i++) {
        var id = SOUND_IDS[i];
        $("#" + id).css("opacity", "1");
    }
    stopSounds();
    nowPreviewId = null;
}

/**
 * デリートボタン押された
 * @param soundId
 */
function deleteClick(soundId) {
    var target = $(event.target);
    var box = target.closest(".dropbox");
    target.css("visibility", "hidden");
    box.css("background-color", "#222");
    box.css("background-image", "none");
    delete playObject[soundId];
}

/**
 * ドロップされたら
 * @param targetId
 * @param soundId
 */
function setDropImage(targetId, soundId) {
    var target = $("#d" + targetId);
    var trgURL = thumbURL[soundId];
    if(target && trgURL){
        target.css("background-image", "url('" + trgURL + "')");
        target.css("background-repeat", "no-repeat");
        target.children(".deleteButton").css("visibility", "visible");
        playObject[targetId] = soundId;
    }
}

//---------------------------------------------------------------------
//
// currentLine  controll
//
//---------------------------------------------------------------------

/**
 *カレントライントラック頭出し
 */
function currentLineSetPosition(n) {
    currentLineTrackX = n;
    currentArrowMove(n);
    currentLineUpdateStart();
}

/**
 * カレントラインアップデートスタート
 */
function currentLineUpdateStart() {
    var date = new Date();
    currentLineStartTime = date.getTime();
    currentLineStop();
    currentLinetimer = setInterval("onCurrentLineUpdate()", 1000 / currentLineXposStep);
}

/**
 * カレントラインストップ
 */
function currentLineStop() {
    clearInterval(currentLinetimer);
}

/**
 * カレントライン動かす
 */
function currentArrowMove(xpos) {
    if(!currentLine) currentLine = $("#currentBar");
    currentLine.css("left", xpos);
}

/**
 *  カレントラインアップデート
 */
function onCurrentLineUpdate() {
    var date = new Date();
    var overTime = date.getTime() - currentLineStartTime;
    var percent = (overTime / TRACK_TIME);
    if (percent >= 1) percent = 1;
    var posX = currentLineTrackX + 112 * percent;
    currentArrowMove(posX);
}

//---------------------------------------------------------------------
//
// status change
//
//---------------------------------------------------------------------

/**
 * デフォルト状態にする
 */
function setDefaultMode() {
    setStopMode();
}

/**
 * 再生可能状態にする
 */
function setStopMode() {

stopSounds();

//再生ボタン有効に
    var playButton = $("#buttonPlay");
    playButton.unbind("click").bind("click", function () {
        stopThumb();
        startTimeline();
        return false;
    });
    playButton.css("cursor", "pointer");
    playButton.css("opacity", "1");
    playButton.css("display", "block");

//停止ボタン無効
    var stopButton = $("#buttonStop");
    stopButton.css("cursor", "default");
    stopButton.css("opacity", "0.5");
    stopButton.unbind("click");
    stopButton.css("display", "block");

//サムネイル再生ボタン有効
    for (var i = 0; i < SOUND_IDS.length; i++) {
        var id = SOUND_IDS[i];
        var previewPlayArrow = $("#p" + id);
        previewPlayArrow.unbind("click").bind("click",function (i) { var _i = i;return function () {playThumb({soundId:_i})};}(id));
        previewPlayArrow.css("cursor", "pointer");
        previewPlayArrow.css("opacity", "1");
    }

//デリートボタン有効
    for (var j = 0; j < THUMB_IDS.length; j++) {
        var id = THUMB_IDS[j];
        var dropThumb = $("#d" + id);
        var delBtn = dropThumb.children(".deleteButton");
        delBtn.unbind("click").bind("click",
            function (j) {
                var _j= j;
                return function () {deleteClick(_j);};
            }(id));
    }

//ドラッグ有効化
    var dragged = $(".dragged");
    dragged.attr("draggable", true);
    dragged.css("cursor", "move");

//デリートボタン有効
    $(".deleteButton").css("cursor", "pointer");

// セットサンプル有効化
    var sampleButton = $("#setSample");
    sampleButton.unbind("click").bind("click", function () {
        setSampleSounds();
        return false;
    });
    sampleButton.css("cursor", "pointer");
    sampleButton.css("opacity", "1");
    sampleButton.css("display", "block");
}

/**
 * 再生中の状態にする
 */
function setPlayMode() {

//停止ボタン有効に
    var stopButton = $("#buttonStop");
    stopButton.unbind("click").bind("click", function () {
        stopTimeline();
        return false;
    });
    stopButton.css("cursor", "pointer");
    stopButton.css("opacity", "1");

//再生ボタン無効
    var playButton = $("#buttonPlay");
    playButton.css("cursor", "default");
    playButton.css("opacity", "0.5");
    playButton.unbind("click");

//サムネイル再生ボタン無効化
    for (var i = 0; i < SOUND_IDS.length; i++) {
        var id = SOUND_IDS[i];
        var previewPlayArrow = $("#p" + id);
        previewPlayArrow.css("cursor", "default");
        previewPlayArrow.unbind("click");
    }
    var dragged = $(".dragged");
    dragged.attr("draggable", false);
    dragged.css("cursor", "default");
    dragged.css("opacity", "0.5");

//デリートボタン無効
    var delButton = $(".deleteButton");
    delButton.css("cursor", "default");
    delButton.unbind("click");

// セットサンプル無効化
    var sampleButton = $("#setSample");
    sampleButton.unbind("click");
    sampleButton.css("cursor", "default");
    sampleButton.css("opacity", "0.5");
}

//---------------------------------------------------------------------
//
// layout
//
//---------------------------------------------------------------------

/**
 * レイアウトセット
 */
function setLayout() {

if (loadingArea)loadingArea.css("display", "none");
    $("#controlArea").delay(1300).fadeIn(500);

$(function () {
        for (var i = 0; i < 3; i++) {
            for (var j = 0; j < 3; j++) {
                var id = (i + "" + j);
                var dragItem = $("<div class='dragged' draggable='true'><img src='" + PREVIWE_BUTTON_URL + "' id='p" + id + "' class='samplePlayButton' /></div>");
                dragItem.attr("id", (i + "" + j));
                dragItem[0].addEventListener("dragstart", dragstartHandler, false);
                $("#soundArea" + i + ":first").append(dragItem);
                var pos = dragItem.offset();
                dragItem.data("pos", {
                    left:pos.left,
                    right:pos.left + dragItem.outerWidth(),
                    top:pos.top,
                    bottom:pos.top + dragItem.outerHeight()
                });
                var trg = $("#" + id);
                trg.css("background-image", "url('" + thumbURL[id] + "')");
                trg.css("width", 112);
                trg.css("height", 36);
                trg.css("display", "none");
                trg.delay(((i * 3) + j) * 100).fadeIn(400);
            }
        }

//------------------------------------------------------
        // drag start
        //------------------------------------------------------
        function dragstartHandler(e) {
            stopThumb();//サムネ再生停止
            var idList = "";
            var sel = $(".selected");
            sel.each(function () {idList += this.id + " ";});
            e.dataTransfer.setData("text", idList);
        }

//------------------------------------------------------
        // drop Area
        //------------------------------------------------------
        var doc = $(document);
        var box =  $(".dropbox");
        box.each(function () {
            this.addEventListener("dragover", f_dragover, false);
            this.addEventListener("drop", f_drop, false);
        });

//------------------------------------------------------
        // drag over
        //------------------------------------------------------
        function f_dragover(e) { e.preventDefault();}

//------------------------------------------------------
        // dropped
        //------------------------------------------------------
        function f_drop(e) {
            if (!$(e.target).hasClass("dropbox")) return;
            e.preventDefault();
            var soundId = e.dataTransfer.getData("text").split(" ")[0];
            //ドロップIDからSoundID に ex(d00 > 00)
            var dropId = (e.target.id).substring(1, 3);
            //ドロップセットされたら
            setDropImage(dropId, soundId);
        }

//mousedownされたらselectedクラスに
        doc.bind("mousedown", function (e) {
            var trg = $(e.target);
            var targetClass = "dragged";
            var addedClass = "selected";
            if (!e.shiftKey && !trg.hasClass(addedClass)) {$("." + addedClass).removeClass(addedClass);}
            if ( e.shiftKey &&  trg.hasClass(addedClass)) {trg.removeClass(addedClass);}
            else if (trg.hasClass(targetClass)) {trg.addClass(addedClass);}
        });
    });
    //デフォルト状態にセット
    setDefaultMode()
}

/**
 * サンプルサウンドセット
 */
function setSampleSounds()
{
    setDropImage("00", "00");
    setDropImage("01", "11");
    setDropImage("02", "20");

setDropImage("10", "00");
    setDropImage("11", "11");
    setDropImage("12", "21");

setDropImage("20", "00");
    setDropImage("21", "12");
    setDropImage("22", "21");

setDropImage("30", "01");
    setDropImage("31", "10");
    setDropImage("32", "22");
}

//---------------------------------------------------------------------
//
// debug
//
//---------------------------------------------------------------------

function trace(str) {
//    console.debug(str);
}

<div id="loadArea">
            <div id="loadMessage"></div>
            <img src="http://www.romatica.com/dev/jsdoit/TranceMetalGeneratorQ/images/loading.gif" />

</div>

<img src="http://www.romatica.com/dev/jsdoit/TranceMetalGeneratorQ/images/SetSampleButton.png" id="setSample" />

<div id="timeLine">

</div>
</div>

</body>

Trance Metal Generato（トランスメタルジェネレータ）

body {
    margin: 0;
    padding: 0;
}
#wrapper {
    margin: 0;
    padding: 0;
    width: 465px;
    height: 465px;
    background-image: url("http://www.romatica.com/dev/jsdoit/TranceMetalGeneratorQ/images/BG.png");
    background-repeat: no-repeat;
}

#wrapper_inner{
    padding:100px 0 0 0 ;
}

#flash_wrapper{
    margin: 0;
    padding: 0;
}

/*----------------------------------------------
 * ローディングエリア
 */
#loadArea {
    width: 465px;
    height: 50px;
    padding-top:35px;
    text-align: center;
    position: absolute;
    top: 160;
    left: 10;
}

#loadText.img {
    margin: 5px auto;
}

#loadMessage {
    color: #999;
    font-size: small;
    margin: 5px auto;
}

#thumbArea{
    margin:  0 auto;
    padding:0;
    width:350px;
    height:132px;
    display: block;
    border: solid 1px #ff5cf8 ;
}
/*----------------------------------------------
 * サウンド横列
 */
.mainbox {
    padding: 0px;
    margin: 0 auto 8px 89px;
    width: 350px;
    height: 36px;
    display: block;

}

/*----------------------------------------------
 * プレビューサムネイル
 */
.dragged {
    background: url("http://www.romatica.com/dev/jsdoit/TranceMetalGeneratorQ/commons/images/PreviewThumb_BG.png") no-repeat;
    /*border-radius: 3px;*/
    width: 112px;
    height: 38px;
    margin: 0px 3px 0px 0;
    float: left;
    line-height: 1;
}

/*プレビューサムネイル選択*/
.selected {
    box-shadow: 0 0 2px #444;
}
/*プレビュー再生ボタン*/
.samplePlayButton {
    float: right;
    margin: 7px 7px 0 0;
}
/*ドラッグサムネ*/
.rect {
    border: #000 dashed 1px;
}
/*----------------------------------------------
 * タイムライン
 */

/*カレント矢印エリア*/
#currentBarArea{
    width:80px;
    position:absolute;
    top:255px;
    left:-5px;/**/
}

/*カレント矢印*/
#currentBar{
    position:absolute;
    top:0;
    left:0;
}
/*タイムラインエリア*/
#timeLine {
    margin: 53px auto 0px;
    width: 456px;
    height: 130px;
}

/*タイムライン縦一列DIV*/
.bar {
    float: left;
    width: 114px
}

/*----------------------------------------------
 * 再生サムネ
 */
.dropbox {
    border-radius: 3px;
    background-color: #222;
    padding: 0px;
    margin: 0 1px 7px;
    width: 112px;
    height: 36px;
}

.dropbox:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

/*サムネ削除ボタン*/
.deleteButton {
    width: 20px;
    height: 20px;
    float: right;
    margin: 5px 5px;
    visibility: hidden;
}

/*----------------------------------------------
 * セットサンプルボタン
 */

/*サンプルボタン*/
#setSample{
    position:absolute;
    top:236px;
    left:346px;
    display:none;
}
/*----------------------------------------
 コントロールエリア
*/
#controlArea {
    width: 180px;
    margin: 10px auto 0;
    display:none;
}
/*再生ボタン*/
#buttonPlay {
    float: left;
    display:none;
}

/*ストップボタン*/
#buttonStop {
    float: right;
    display:none;
}

/*----------------------------------------
 * TEXT
 */

/*サウンドサムネ楽器タイトル*/
.soundTitle {
    font-size: 8px;
    float: left;
    width: 55px;
}

/*サムネ内テキスト*/
.soundLabel {
    color: #ccc;
    font-size: xx-small;
    float: left;
    width: 50px;
    margin: 3px 0 0 18px;
    cursor:default;
    draggable:false;
}

#debugArea{display:none;}

# Trance Metal Generator ##トランスメタルジェネレータ（Web Audio API ver） @author itoz ( http://www.romatica.com/ ) *** ##ドラッグ＆ドロップだけで曲が作れるシーケンサ **Chrome 最新版、Safari6 以上のみ再生可** ##update - [2012.10.3] SoundJS から Web Audio API に変更。 ##遊び方 1. 上部のサムネイルを下部にドラッグ＆ドロップ 1. 再生ボタンで再生 1. 手っ取り早く遊んでみたい人は「SET SAMPLE」ボタンから /** *============================================================ * Trance Metal Generator (Web Audio API ver) * （トランスメタルジェネレーター） * * @author itoz ( http://www.romatica.com/ ) * *============================================================ */ var ASSETS_DIR = "http://www.romatica.com/dev/jsdoit/TranceMetalGeneratorQ/images/"; var PREVIWE_BUTTON_URL = ASSETS_DIR + "previewButton.png"; var SOUNDS_DIR = "sounds/mp3/"; var TRACK_TIME = 5630; /**sound IDs*/ var SOUND_IDS = [ "00", "01", "02" , "10", "11", "12" , "20", "21", "22"]; /**thumb IDs*/ var THUMB_IDS = [ "00", "01", "02" , "10", "11", "12" , "20", "21", "22" , "30", "31", "32"]; /**sound Names*/ var SOUND_NAMES = [ "drum_0" , "drum_1" , "drum_2" , "synce_0" , "synce_1" , "synce_2" , "guitar_0", "guitar_1", "guitar_2" ] //_____________________________________________________________________ /**Sound URL*/ var soundURL = new Object(); /** ThumbImages*/ var thumbURL = new Object(); /** ThumbImages*/ var playObject = new Object(); //_____________________________________________________________________ var isLoadComplete = false; var loadingArea; var loadingMessage; //_____________________________________________________________________ var bufferLoader; var soundSources = {}; var soundBuffers = {}; //_____________________________________________________________________ var context; var analyser; var timeDomainData; //_____________________________________________________________________ var isLoop = true; var mainSoundIdArray = []; var nowPreviewId = null; var trackCount = 0; var trackInterval; //_____________________________________________________________________ var currentLine; var currentLineXposStep = 60; var currentLineTrackX = 0; var currentLineStartTime; var currentLinetimer; //_____________________________________________________________________ //--------------------------------------------------------------------- // // initialize // //--------------------------------------------------------------------- /** * initialize */ function initialize() { createAssetsURLs(); soundLoadStart(); } /** * assets url */ function createAssetsURLs() { for (var i = 0; i < SOUND_IDS.length; i++) { var id = SOUND_IDS[i]; soundURL[id] = SOUNDS_DIR + SOUND_NAMES[i] + ".mp3"; thumbURL[id] = ASSETS_DIR + "bg_" + SOUND_NAMES[i] + ".png"; } // return ; //jsdoit 投稿用 soundURL["00"] = "http://jsrun.it/assets/z/y/0/1/zy01Y.mp3";//SOUNDS_DIR + "drum_0.mp3"; soundURL["01"] = "http://jsrun.it/assets/m/8/2/k/m82kx.mp3";//SOUNDS_DIR + "drum_1.mp3"; soundURL["02"] = "http://jsrun.it/assets/b/a/d/T/badTY.mp3";//SOUNDS_DIR + "drum_2.mp3"; soundURL["10"] = "http://jsrun.it/assets/p/H/e/Q/pHeQ5.mp3";//SOUNDS_DIR + "synce_0.mp3"; soundURL["11"] = "http://jsrun.it/assets/g/J/b/L/gJbLo.mp3";//SOUNDS_DIR + "synce_1.mp3"; soundURL["12"] = "http://jsrun.it/assets/v/C/J/B/vCJBY.mp3";//SOUNDS_DIR + "synce_2.mp3"; soundURL["20"] = "http://jsrun.it/assets/q/F/d/T/qFdTA.mp3";//SOUNDS_DIR + "guitar_0.mp3"; soundURL["21"] = "http://jsrun.it/assets/r/j/x/T/rjxTV.mp3";//SOUNDS_DIR + "guitar_1.mp3"; soundURL["22"] = "http://jsrun.it/assets/o/o/6/F/oo6Fb.mp3";//SOUNDS_DIR + "guitar_2.mp3"; } //--------------------------------------------------------------------- // // sound loading // //--------------------------------------------------------------------- /** * サウンドロードスタート */ function soundLoadStart() { if (!loadingArea) loadingArea = $("#loadArea"); if (!loadingMessage) loadingMessage = $("#loadMessage"); loadingMessage.text("loading sounds"); try { context = new webkitAudioContext(); } catch(e) { alert('このブラウザでは再生することができません'); loadingArea.text("Web Audio API is not supported in this browser"); return ; } analyser = context.createAnalyser(); analyser.connect(context.destination); timeDomainData = new Uint8Array(analyser.frequencyBinCount); var soundURLArray = []; for (var i = 0; i < SOUND_IDS.length; i++) soundURLArray.push(soundURL[SOUND_IDS[i]]); bufferLoader = new BufferLoader( context , soundURLArray , soundLoadComplete ); bufferLoader.onProgress = soundLoadProgress; bufferLoader.load(); } /** * サウンドロードプログレス */ function soundLoadProgress(loadCount, loadLength) { var parsent = Math.floor(( loadCount / loadLength ) * 100); if (loadingMessage) loadingMessage.text("loading sounds " + (parsent) + "%"); } /** * サウンドロードコンプリート */ function soundLoadComplete(bufferList) { for (var i = 0; i < SOUND_IDS.length; i++) { var id = SOUND_IDS[i]; soundBuffers[id] = bufferList[i]; } isLoadComplete = true; setLayout(); } //--------------------------------------------------------------------- // // sound controll // //--------------------------------------------------------------------- /** * サウンドを鳴らす * @param id */ function playSoundById(id) { var source = context.createBufferSource(); source.buffer = soundBuffers[id]; source.connect(context.destination); source.noteOn(0); source.connect(analyser); soundSources[id] = source; } /** * すべてのサウンドをストップ */ function stopSounds() { for (var i = 0; i < SOUND_IDS.length; i++) { var id = SOUND_IDS[i]; stopSoundById(id); } } /** * サウンドをストップ * @param id */ function stopSoundById(id) { var source = soundSources[id]; if (source) source.noteOff(0); } //--------------------------------------------------------------------- // // timeline controll // //--------------------------------------------------------------------- /** * タイムライン再生する */ function startTimeline() { stopThumb(); if (playObject == null) return; trackCount = 0; mainSoundIdArray = createMainSoundArray(playObject); doSound(); setPlayMode(); } /** * タイムラインストップする */ function stopTimeline() { clearTimeout(trackInterval); currentLineStop(); stopThumb(); setStopMode(); } /** * サウンドID配列化 * @param value * @return {Array} */ function createMainSoundArray(value) { var arr = []; for (var i in value) { var id = (i).toString(); var idHeadInt = Math.floor(id.charAt(0)); if (arr[idHeadInt] == null) arr[idHeadInt] = []; arr[idHeadInt].push(value[i]); } for (var j = 0; j < 4; j++) if (arr[ j] == null) arr[ j] = []; return arr; } /** * 1トラック分のサウンドを鳴らす */ function doSound() { // 最後に到達したか if (trackCount == mainSoundIdArray.length) { if (isLoop) { trackCount = 0; //ラインの位置初期化 currentLineSetPosition(0); } else { stopTimeline(); return; } } // 縦列分のデータ var barArray = mainSoundIdArray[trackCount]; if (barArray == null) barArray = []; for (var i = 0; i < barArray.length; i++) { var sndId = barArray[i].toString(); if (sndId) playSoundById(sndId); // 再生 } var timerCount = trackCount % mainSoundIdArray.length; currentLineSetPosition((455 / 4) * timerCount); //★ラインエリア頭合わせ trackInterval = setTimeout('timerCompleteHandler()', TRACK_TIME); trackCount += 1; } /** * 縦トラック分インターバル終了 */ function timerCompleteHandler() { doSound(); } //--------------------------------------------------------------------- // // thumb controll // //--------------------------------------------------------------------- /** * サムネイル再生 * @param obj */ function playThumb(obj) { //なにか再生されている if (nowPreviewId != null) { //再生されているのが自分自身だった if (nowPreviewId == obj.soundId) { //ストップしてリターン stopThumb(); return; } stopThumb(); } nowPreviewId = obj.soundId; $("#" + nowPreviewId).css("opacity", "0.5"); playSoundById(nowPreviewId); } /** * 全サムネイル停止 */ function stopThumb() { currentArrowMove(0) for (var i = 0; i < SOUND_IDS.length; i++) { var id = SOUND_IDS[i]; $("#" + id).css("opacity", "1"); } stopSounds(); nowPreviewId = null; } /** * デリートボタン押された * @param soundId */ function deleteClick(soundId) { var target = $(event.target); var box = target.closest(".dropbox"); target.css("visibility", "hidden"); box.css("background-color", "#222"); box.css("background-image", "none"); delete playObject[soundId]; } /** * ドロップされたら * @param targetId * @param soundId */ function setDropImage(targetId, soundId) { var target = $("#d" + targetId); var trgURL = thumbURL[soundId]; if(target && trgURL){ target.css("background-image", "url('" + trgURL + "')"); target.css("background-repeat", "no-repeat"); target.children(".deleteButton").css("visibility", "visible"); playObject[targetId] = soundId; } } //--------------------------------------------------------------------- // // currentLine controll // //--------------------------------------------------------------------- /** *カレントライントラック頭出し */ function currentLineSetPosition(n) { currentLineTrackX = n; currentArrowMove(n); currentLineUpdateStart(); } /** * カレントラインアップデートスタート */ function currentLineUpdateStart() { var date = new Date(); currentLineStartTime = date.getTime(); currentLineStop(); currentLinetimer = setInterval("onCurrentLineUpdate()", 1000 / currentLineXposStep); } /** * カレントラインストップ */ function currentLineStop() { clearInterval(currentLinetimer); } /** * カレントライン動かす */ function currentArrowMove(xpos) { if(!currentLine) currentLine = $("#currentBar"); currentLine.css("left", xpos); } /** * カレントラインアップデート */ function onCurrentLineUpdate() { var date = new Date(); var overTime = date.getTime() - currentLineStartTime; var percent = (overTime / TRACK_TIME); if (percent >= 1) percent = 1; var posX = currentLineTrackX + 112 * percent; currentArrowMove(posX); } //--------------------------------------------------------------------- // // status change // //--------------------------------------------------------------------- /** * デフォルト状態にする */ function setDefaultMode() { setStopMode(); } /** * 再生可能状態にする */ function setStopMode() { stopSounds(); //再生ボタン有効に var playButton = $("#buttonPlay"); playButton.unbind("click").bind("click", function () { stopThumb(); startTimeline(); return false; }); playButton.css("cursor", "pointer"); playButton.css("opacity", "1"); playButton.css("display", "block"); //停止ボタン無効 var stopButton = $("#buttonStop"); stopButton.css("cursor", "default"); stopButton.css("opacity", "0.5"); stopButton.unbind("click"); stopButton.css("display", "block"); //サムネイル再生ボタン有効 for (var i = 0; i < SOUND_IDS.length; i++) { var id = SOUND_IDS[i]; var previewPlayArrow = $("#p" + id); previewPlayArrow.unbind("click").bind("click",function (i) { var _i = i;return function () {playThumb({soundId:_i})};}(id)); previewPlayArrow.css("cursor", "pointer"); previewPlayArrow.css("opacity", "1"); } //デリートボタン有効 for (var j = 0; j < THUMB_IDS.length; j++) { var id = THUMB_IDS[j]; var dropThumb = $("#d" + id); var delBtn = dropThumb.children(".deleteButton"); delBtn.unbind("click").bind("click", function (j) { var _j= j; return function () {deleteClick(_j);}; }(id)); } //ドラッグ有効化 var dragged = $(".dragged"); dragged.attr("draggable", true); dragged.css("cursor", "move"); //デリートボタン有効 $(".deleteButton").css("cursor", "pointer"); // セットサンプル有効化 var sampleButton = $("#setSample"); sampleButton.unbind("click").bind("click", function () { setSampleSounds(); return false; }); sampleButton.css("cursor", "pointer"); sampleButton.css("opacity", "1"); sampleButton.css("display", "block"); } /** * 再生中の状態にする */ function setPlayMode() { //停止ボタン有効に var stopButton = $("#buttonStop"); stopButton.unbind("click").bind("click", function () { stopTimeline(); return false; }); stopButton.css("cursor", "pointer"); stopButton.css("opacity", "1"); //再生ボタン無効 var playButton = $("#buttonPlay"); playButton.css("cursor", "default"); playButton.css("opacity", "0.5"); playButton.unbind("click"); //サムネイル再生ボタン無効化 for (var i = 0; i < SOUND_IDS.length; i++) { var id = SOUND_IDS[i]; var previewPlayArrow = $("#p" + id); previewPlayArrow.css("cursor", "default"); previewPlayArrow.unbind("click"); } var dragged = $(".dragged"); dragged.attr("draggable", false); dragged.css("cursor", "default"); dragged.css("opacity", "0.5"); //デリートボタン無効 var delButton = $(".deleteButton"); delButton.css("cursor", "default"); delButton.unbind("click"); // セットサンプル無効化 var sampleButton = $("#setSample"); sampleButton.unbind("click"); sampleButton.css("cursor", "default"); sampleButton.css("opacity", "0.5"); } //--------------------------------------------------------------------- // // layout // //--------------------------------------------------------------------- /** * レイアウトセット */ function setLayout() { if (loadingArea)loadingArea.css("display", "none"); $("#controlArea").delay(1300).fadeIn(500); $(function () { for (var i = 0; i < 3; i++) { for (var j = 0; j < 3; j++) { var id = (i + "" + j); var dragItem = $("<div class='dragged' draggable='true'><img src='" + PREVIWE_BUTTON_URL + "' id='p" + id + "' class='samplePlayButton' /></div>"); dragItem.attr("id", (i + "" + j)); dragItem[0].addEventListener("dragstart", dragstartHandler, false); $("#soundArea" + i + ":first").append(dragItem); var pos = dragItem.offset(); dragItem.data("pos", { left:pos.left, right:pos.left + dragItem.outerWidth(), top:pos.top, bottom:pos.top + dragItem.outerHeight() }); var trg = $("#" + id); trg.css("background-image", "url('" + thumbURL[id] + "')"); trg.css("width", 112); trg.css("height", 36); trg.css("display", "none"); trg.delay(((i * 3) + j) * 100).fadeIn(400); } } //------------------------------------------------------ // drag start //------------------------------------------------------ function dragstartHandler(e) { stopThumb();//サムネ再生停止 var idList = ""; var sel = $(".selected"); sel.each(function () {idList += this.id + " ";}); e.dataTransfer.setData("text", idList); } //------------------------------------------------------ // drop Area //------------------------------------------------------ var doc = $(document); var box = $(".dropbox"); box.each(function () { this.addEventListener("dragover", f_dragover, false); this.addEventListener("drop", f_drop, false); }); //------------------------------------------------------ // drag over //------------------------------------------------------ function f_dragover(e) { e.preventDefault();} //------------------------------------------------------ // dropped //------------------------------------------------------ function f_drop(e) { if (!$(e.target).hasClass("dropbox")) return; e.preventDefault(); var soundId = e.dataTransfer.getData("text").split(" ")[0]; //ドロップIDからSoundID に ex(d00 > 00) var dropId = (e.target.id).substring(1, 3); //ドロップセットされたら setDropImage(dropId, soundId); } //mousedownされたらselectedクラスに doc.bind("mousedown", function (e) { var trg = $(e.target); var targetClass = "dragged"; var addedClass = "selected"; if (!e.shiftKey && !trg.hasClass(addedClass)) {$("." + addedClass).removeClass(addedClass);} if ( e.shiftKey && trg.hasClass(addedClass)) {trg.removeClass(addedClass);} else if (trg.hasClass(targetClass)) {trg.addClass(addedClass);} }); }); //デフォルト状態にセット setDefaultMode() } /** * サンプルサウンドセット */ function setSampleSounds() { setDropImage("00", "00"); setDropImage("01", "11"); setDropImage("02", "20"); setDropImage("10", "00"); setDropImage("11", "11"); setDropImage("12", "21"); setDropImage("20", "00"); setDropImage("21", "12"); setDropImage("22", "21"); setDropImage("30", "01"); setDropImage("31", "10"); setDropImage("32", "22"); } //--------------------------------------------------------------------- // // debug // //--------------------------------------------------------------------- function trace(str) { // console.debug(str); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="http://www.romatica.com/dev/jsdoit/TranceMetalGeneratorQ/js/buffer-loader.js"></script> <script type="text/javascript" src="index.js"></script> <body onLoad="initialize()"> <div id="wrapper"> <div id="wrapper_inner">  <div id="loadArea"> <div id="loadMessage"></div> <img src="http://www.romatica.com/dev/jsdoit/TranceMetalGeneratorQ/images/loading.gif" /> </div>  <div id="soundArea0" class="mainbox"></div> <div id="soundArea1" class="mainbox"></div> <div id="soundArea2" class="mainbox"></div>  <img src="http://www.romatica.com/dev/jsdoit/TranceMetalGeneratorQ/images/SetSampleButton.png" id="setSample" />  <div id="timeLine"> <div id="currentBarArea"> <img id="currentBar" src="http://www.romatica.com/dev/jsdoit/TranceMetalGeneratorQ/images/CurrentTimeLineBar.png" /> </div> <div class="bar"> <div id="d00" class="dropbox" dropzone="link"> <div class="soundLabel"></div> <img src="http://www.romatica.com/dev/jsdoit/TranceMetalGeneratorQ/images/DropThumb_DeleteButton.png" class="deleteButton" /> </div> <div id="d01" class="dropbox" dropzone="link"> <div class="soundLabel"></div> <img src="http://www.romatica.com/dev/jsdoit/TranceMetalGeneratorQ/images/DropThumb_DeleteButton.png" class="deleteButton" /> </div> <div id="d02" class="dropbox" dropzone="link"> <div class="soundLabel"></div> <img src="http://www.romatica.com/dev/jsdoit/TranceMetalGeneratorQ/images/DropThumb_DeleteButton.png" class="deleteButton" /> </div> </div> <div class="bar"> <div id="d10" class="dropbox" dropzone="link"> <div class="soundLabel"></div> <img src="http://www.romatica.com/dev/jsdoit/TranceMetalGeneratorQ/images/DropThumb_DeleteButton.png" class="deleteButton" /> </div> <div id="d11" class="dropbox" dropzone="link"> <div class="soundLabel"></div> <img src="http://www.romatica.com/dev/jsdoit/TranceMetalGeneratorQ/images/DropThumb_DeleteButton.png" class="deleteButton" /> </div> <div id="d12" class="dropbox" dropzone="link"> <div class="soundLabel"></div> <img src="http://www.romatica.com/dev/jsdoit/TranceMetalGeneratorQ/images/DropThumb_DeleteButton.png" class="deleteButton" /> </div> </div> <div class="bar"> <div id="d20" class="dropbox" dropzone="link"> <div class="soundLabel"></div> <img src="http://www.romatica.com/dev/jsdoit/TranceMetalGeneratorQ/images/DropThumb_DeleteButton.png" class="deleteButton" /> </div> <div id="d21" class="dropbox" dropzone="link"> <div class="soundLabel"></div> <img src="http://www.romatica.com/dev/jsdoit/TranceMetalGeneratorQ/images/DropThumb_DeleteButton.png" class="deleteButton" /> </div> <div id="d22" class="dropbox" dropzone="link"> <div class="soundLabel"></div> <img src="http://www.romatica.com/dev/jsdoit/TranceMetalGeneratorQ/images/DropThumb_DeleteButton.png" class="deleteButton" /> </div> </div> <div class="bar"> <div id="d30" class="dropbox" dropzone="link"> <div class="soundLabel"></div> <img src="http://www.romatica.com/dev/jsdoit/TranceMetalGeneratorQ/images/DropThumb_DeleteButton.png" class="deleteButton" /> </div> <div id="d31" class="dropbox" dropzone="link"> <div class="soundLabel"></div> <img src="http://www.romatica.com/dev/jsdoit/TranceMetalGeneratorQ/images/DropThumb_DeleteButton.png" class="deleteButton" /> </div> <div id="d32" class="dropbox" dropzone="link"> <div class="soundLabel"></div> <img src="http://www.romatica.com/dev/jsdoit/TranceMetalGeneratorQ/images/DropThumb_DeleteButton.png" class="deleteButton" /> </div> </div> </div> <div id="controlArea"> <img src="http://www.romatica.com/dev/jsdoit/TranceMetalGeneratorQ/images/ButtonPlay.png" id="buttonPlay" /> <img src="http://www.romatica.com/dev/jsdoit/TranceMetalGeneratorQ/images/ButtonStop.png" id="buttonStop" /> </div> </div> </div> </body>body { margin: 0; padding: 0; } #wrapper { margin: 0; padding: 0; width: 465px; height: 465px; background-image: url("http://www.romatica.com/dev/jsdoit/TranceMetalGeneratorQ/images/BG.png"); background-repeat: no-repeat; } #wrapper_inner{ padding:100px 0 0 0 ; } #flash_wrapper{ margin: 0; padding: 0; } /*---------------------------------------------- * ローディングエリア */ #loadArea { width: 465px; height: 50px; padding-top:35px; text-align: center; position: absolute; top: 160; left: 10; } #loadText.img { margin: 5px auto; } #loadMessage { color: #999; font-size: small; margin: 5px auto; } #thumbArea{ margin: 0 auto; padding:0; width:350px; height:132px; display: block; border: solid 1px #ff5cf8 ; } /*---------------------------------------------- * サウンド横列 */ .mainbox { padding: 0px; margin: 0 auto 8px 89px; width: 350px; height: 36px; display: block; } /*---------------------------------------------- * プレビューサムネイル */ .dragged { background: url("http://www.romatica.com/dev/jsdoit/TranceMetalGeneratorQ/commons/images/PreviewThumb_BG.png") no-repeat; /*border-radius: 3px;*/ width: 112px; height: 38px; margin: 0px 3px 0px 0; float: left; line-height: 1; } /*プレビューサムネイル選択*/ .selected { box-shadow: 0 0 2px #444; } /*プレビュー再生ボタン*/ .samplePlayButton { float: right; margin: 7px 7px 0 0; } /*ドラッグサムネ*/ .rect { border: #000 dashed 1px; } /*---------------------------------------------- * タイムライン */ /*カレント矢印エリア*/ #currentBarArea{ width:80px; position:absolute; top:255px; left:-5px;/**/ } /*カレント矢印*/ #currentBar{ position:absolute; top:0; left:0; } /*タイムラインエリア*/ #timeLine { margin: 53px auto 0px; width: 456px; height: 130px; } /*タイムライン縦一列DIV*/ .bar { float: left; width: 114px } /*---------------------------------------------- * 再生サムネ */ .dropbox { border-radius: 3px; background-color: #222; padding: 0px; margin: 0 1px 7px; width: 112px; height: 36px; } .dropbox:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } /*サムネ削除ボタン*/ .deleteButton { width: 20px; height: 20px; float: right; margin: 5px 5px; visibility: hidden; } /*---------------------------------------------- * セットサンプルボタン */ /*サンプルボタン*/ #setSample{ position:absolute; top:236px; left:346px; display:none; } /*---------------------------------------- コントロールエリア */ #controlArea { width: 180px; margin: 10px auto 0; display:none; } /*再生ボタン*/ #buttonPlay { float: left; display:none; } /*ストップボタン*/ #buttonStop { float: right; display:none; } /*---------------------------------------- * TEXT */ /*サウンドサムネ楽器タイトル*/ .soundTitle { font-size: 8px; float: left; width: 55px; } /*サムネ内テキスト*/ .soundLabel { color: #ccc; font-size: xx-small; float: left; width: 50px; margin: 3px 0 0 18px; cursor:default; draggable:false; } #debugArea{display:none;}

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

itoz

http://www.romatica.com/

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/8A2b/js"></script>

QR Code

Discussion

Questions on this code?

Favorite by

alvarobyrne

jack3low

flatstone58

h_doxas

timothyqd

clockmaker:

nakashimmer:

Qブロックで演奏できるといいですね。

Iky.I:

単純に楽しく遊べて好きです◎

Trance Metal Generato（トランスメタルジェネレータ）

Trance Metal Generator

トランスメタルジェネレータ（Web Audio API ver）

ドラッグ＆ドロップだけで曲が作れるシーケンサ

update

遊び方

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Favorite by