2016-03-30 23 views
0

私はキーを押すたびに "keypress"サウンドをトリガーするために以下のJavaScriptコードを使用しています。 最大の問題は、入力するのが早すぎると(前のクリップが終了する前と思われる)、再生する埋め込みタグに送られた次のクリップのソースが未定義であることです。 埋め込みタグソースオーディオ後に定義されていません

document.onkeydown = function() { 
    var numberOfSongs = 3 
    var sound = new Array(numberOfSongs+1) 
    sound[0]= "key1.mp3" 
    sound[1]= "key2.mp3" 
    sound[2]= "key3.mp3" 
    function randomNumber(){ 
    var randomLooper = -1 
    while (randomLooper < 0 || randomLooper > numberOfSongs || isNaN(randomLooper)){ randomLooper = parseInt(Math.random()*(numberOfSongs+1)) 
    } 
     return randomLooper 
    } 
    var randomsub = randomNumber() 
    var soundFile = sound[randomsub] 
    document.getElementById("audio").innerHTML = '<EMBED src= "' + soundFile + '" hidden=true autostart=true loop=true>'; 
} 

は、私は、これは簡単にクリップが前の上のいずれかの演奏、またはクリップの前のクリップを中断することを可能にすることを可能にすることによって固定されていると思いますが、これは単なる憶測です。

+0

これを処理するには、debounceを使用する必要があります。 – thangngoc89

+0

whileループは本当に不要です。0から配列の長さまでの乱数を生成することができます。 –

答えて

0

あなたは、アレイから取得しようとしている値のいずれかがundefinedあるので、あなたがundefinedを取得している理由があります。

アレイの問題:

このコード:

var numberOfSongs = 3 
var sound = new Array(numberOfSongs+1) 
sound[0]= "key1.mp3" 
sound[1]= "key2.mp3" 
sound[2]= "key3.mp3" 

のように見える配列建物です:

[ "key1.mp3"、 "key2.mp3" を、 "key3.mp3"、undefined]

 の

乱数問題:

あなたの乱数ジェネレータは、あなたの配列外の値を生成することによって、全くの事を助けていません。それが今であるとして

、あなたの乱数生成器は、0と3の間の値を返しますが、あなたの配列は3位、0、1、2

 

パフォーマンス問題の値を持っています:

最後に、キー配列ごとにサウンド配列とrandomNumber関数を再宣言しています。これは不要であり、パフォーマンスを阻害することになります。

 

更新されたコード:

考慮にそれを取ると、このようなあなたの何かが仕事ができる:

var sound = []; 
sound.push("key1.mp3"); 
sound.push("key2.mp3"); 
sound.push("key3.mp3"); 

function randomNumber(){ 
    return parseInt(Math.random()*(sound.length)) 
} 

document.onkeydown = function() { 
    var soundFile = sound[randomNumber()] 
    document.getElementById("audio").innerHTML = '<EMBED src= "' + soundFile + '" hidden=true autostart=true loop=true>'; 
} 

あなたはこの中にその例を見ることができるがフィドルをJS:https://jsfiddle.net/egrgnmqp/2/

 

追加もっと.mp3s

あなたはより多くのサウンドファイルを持っているために、これを展開するつもりなら、あなたはまた、それらを生成することができ、動的代わりにその上の各を入力することのあなたの配列にプッシュされます。たとえばあなたは50の音を望んでいた場合、このような何かが仕事ができる:

var sound = []; 
for(var i = 1; i <= 50; i++) { 
    sound.push("key"+i+".mp3"); 
} 

これはフィドルは、それがどのように働くかの更新例を持っているJS:私は願っています:-) https://jsfiddle.net/egrgnmqp/3/

 

乾杯それは助ける!

関連する問題