2016-10-15 15 views
0

howler.jsをランダムオーディオプレーヤーに使用していますが、これは素晴らしいと思われます。私はそれが働いているとボリュームスライダー(ただし、ここに別のポストのおかげで)....ボリュームスライダーは、最初の演奏でのみ動作するようだ。次のファイルを選択したときには、そのファイルは選択されません。これはスコープと関係しているのでしょうか、それとも、関数の中で 'on end'を使って次のループをトリガーしているのでしょうか? (私が思う)ハウラーjsボリュームスライダーが最初の再生後にループしません

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"    "http://www.w3.org/TR/html4/loose.dtd"> 
    <html> 

    <head> 
    <title></title> 
    </head> 
    <body> 
    <script src="howler.core.js"></script> 
    <script> 

    function createHowl() { 
    var number = Math.floor((Math.random() * 14) + 1); 
    return new Howl({ 
    src:  ['audio/' + number + '.wav'], 
    autoplay: false, 
    loop:  false, 
    volume: 1.0, 
    onend: function() {createHowl().play()} 
    }); 
    } 

     function showValue(newValue) { 
     document.getElementById('range').innerHTML=newValue; 
     howl.volume(newValue); 
     } 

     var howl = createHowl(); 
     howl.play(); 

     </script> 
     <input type="range" min="0" max="1" value="1" step="0.01" onchange="showValue(this.value)" oninput="showValue(this.value)"/> 
     <span id="range">0</span> </body> 
     </html> 

ボリュームスライダー以外はすべて動作しているようです。私はそれを働かせることはできませんが、最後にはそれをすると思っています。しかし、私はそれなしでループすることはできません。

乾杯

答えて

0

あなたはonendに新しいハウルオブジェクトを作成しているからです。ハウル変数が常に最新の再生音を指していることを確認する必要があります。

var currentHowl = null 

function createHowl() { 
    var number = Math.floor((Math.random() * 14) + 1); 
    currentHowl = new Howl({ 
    src:  ['audio/' + number + '.wav'], 
    autoplay: false, 
    loop:  false, 
    volume: 1.0, 
    onend: function() {createHowl().play()} 
    }); 

    return currentHowl 
} 

function showValue(newValue) { 
    document.getElementById('range').innerHTML=newValue; 
    currentHowl.volume(newValue); 
} 

var howl = createHowl(); 
howl.play(); 
+0

ありがとう。これはまだ動作しないようです。プレーヤーは細かくループし、スライダーの値は更新されますが、音量は – dee

関連する問題