2016-11-01 12 views
0

これで、どの曲を再生するかを決める変数を与えることができました(このコードは複数の曲にリダイレクトする複数のボタン)。ボタンを押して別の曲を再生するときに再生中の曲を停止させる機能を構築したい

問題は、1つのボタンを押してから別のボタンを押すと、2つの曲が同時に再生されるという問題です。今問題は、選択した曲を再生する前に、すべての曲が一時停止していることを実装する方法です。

私はjQuery経由で配列を作成し、配列に.stopを適用することを考えましたが、それはうまくいかないようです。

コード:

function aud_play_pause(n) { 
    var myAudio = document.getElementById("Audio" + n); 
    var taskArray = new Array(); 

    $('audio[id^="Audio"]').each(function() { 
     taskArray.push($(this).val()); 
    }); 

    if (myAudio.paused) { 
     taskArray.pause(); 
     myAudio.play(); 
    } else { 
     myAudio.pause(); 
    } 
} 

ここに私の抜粋です:

(mp3ファイルが含まれていません - それはそれはしかし働きエラーをスロー理由です、私はプロム:D)を

function aud_play_pause(n) { 
 
    var myAudio = document.getElementById("Audio" + n); 
 
    var taskArray = new Array(); 
 

 
    $('audio[id^="Audio"]').each(function() { 
 
    taskArray.push($(this).val()); 
 
    }); 
 

 
    if (myAudio.paused) { 
 
    taskArray.pause(); 
 
    myAudio.play(); 
 
    } else { 
 
    myAudio.pause(); 
 
    } 
 
}
@import url(http://fonts.googleapis.com/css?family=Open+Sans); 
 
.btn { 
 
    font-family: 'Open Sans'; 
 
    background-color: #4a4a4a; 
 
    display: inline-block; 
 
    border-radius: 42px; 
 
    cursor: pointer; 
 
    color: #ffffff; 
 
    margin: 5px; 
 
    font-size: 17px; 
 
    font-weight: 3px; 
 
    height: 3em; 
 
    width: 22em; 
 
    text-decoration: none; 
 
    border: 0; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    -webkit-transform: perspective(1px) translateZ(0); 
 
    transform: perspective(1px) translateZ(0); 
 
    box-shadow: 0 0 1px transparent; 
 
    -webkit-transition-duration: 0.3s; 
 
    transition-duration: 0.3s; 
 
    -webkit-transition-property: transform; 
 
    transition-property: transform; 
 
    -webkit-transition-timing-function: ease-out; 
 
    transition-timing-function: ease-out; 
 
} 
 
.btn:hover, 
 
.btn:focus, 
 
.btn:active { 
 
    -webkit-transform: translateY(-4px); 
 
    transform: translateY(-4px); 
 
    background-color: #CF4647; 
 
    outline: none; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Handy Page</title> 
 
    <link rel="icon" href="DragOn.ico"> 
 
    <link rel="stylesheet" href="stylesheet.css"> 
 
    <script type="text/javascript" src="code.js"></script> 
 
</head> 
 

 
<body bgcolor=#000000> 
 
    <button class="btn" type="button" onclick="aud_play_pause(1)">Delax</button> 
 
    <button class="btn" type="button" onclick="aud_play_pause(2)">Daft Punk</button> 
 
    <button class="btn" type="button" onclick="aud_play_pause(3)">8-bit</button> 
 
    <button class="btn" type="button" onclick="aud_play_pause(4)">Godwolf</button> 
 
    <button class="btn" type="button" onclick="aud_play_pause(5)">Bounce</button> 
 
    <audio class="music" id="Audio5" src="Orkestrated and Fries & Shine ft. Big Nab - Melbourne Bounce (Deorro Remix).mp3" type="audio/mp3"> 
 
    Your browser does not support the HTML5 Audio element. 
 
    </audio> 
 
    <audio class="music" id="Audio4" src="Godwolf - Love Is A Battlefield.mp3" type="audio/mp3"> 
 
    Your browser does not support the HTML5 Audio element. 
 
    </audio> 
 
    <audio class="music" id="Audio3" src="unreal superheroe.mp3" type="audio/mp3"> 
 
    Your browser does not support the HTML5 Audio element. 
 
    </audio> 
 
    <audio class="music" id="Audio2" src="Daft Punk - Harder Better Faster Stronger RMX.mp3" type="audio/mp3"> 
 
    Your browser does not support the HTML5 Audio element. 
 
    </audio> 
 
    <audio id="Audio1" source src="Delax - Drop You Like.mp3" type="audio/mp3"> 
 
    Your browser does not support the HTML5 Audio element. 
 
    </audio>

コーディング(昨日から)。

私はインターネット上で何も見つけられなかったので誰もそれを尋ねる誰もそれを聞いていないか、まだ誰もそれをまだ尋ねなかったので、答えはとても明白です。

ありがとうございます!

答えて

0

アレイには.pause()メソッドがないため、taskArray.pause()という行にエラーが発生します。

あなたが代わりに行うことができますする項目をループで、直接ではなく、配列を使用するよりも、それらを一時停止:

function aud_play_pause(n) { 
    var myAudio = document.getElementById("Audio" + n); 

    if (myAudio.paused) { 
    $('audio[id^="Audio"]').not(myAudio).each(function() { 
     this.pause(); 
    }); 
    myAudio.play(); 
    } else { 
    myAudio.pause(); 
    } 
} 

は(ので.each()ループ内$(this).val()の使用は意味がないことにも注意してください<audio>要素はvalueを持っていない)

0

私はあなたが行うことができますjQueryのを使用している参照ので:。

$('#Audio1')[0].play() 

jQueryはplay()関数を提供していないので、実際のオーディオオブジェクトでplay()を呼び出す必要があります。これはセレクタが返す必要があるため、上記のコードはインデックスです1回の入力で結果)。あなたはすべてを一時停止する場合のようなもの回す:また

$('audio').forEach(function (entry) { 
    entry.pause(); 
}) 

を、HTMLフォームのようなものでなければなりません:ところで、ノートスタイルとして

<audio id="Audio1"> 
    <source src="myfile.mp3"> 
</audio> 

、JS規則は、関数名はキャメルケースにする必要があります示唆します。 ($(...)間のテキスト)のセレクタの詳細についても

は、以下を参照してください。http://api.jquery.com/category/selectors/

関連する問題