2017-10-28 6 views
0

クリックしたりタップすると、時計とボタンでウェブページを構築しています。時間。 2つのファイルを順番に再生するのに問題があります。現時点では両方とも本質的に同時に再生されます。モバイルブラウザでplay()の制限を処理している間に、最初のオーディオファイルを再生する

mp3ファイルを順番に再生することには本当に感謝しています。現時点ではほぼ同じ時期に始まります。

再生する時間をトリガーするボタンを含む、ここに私のHTMLがあります。

<body onload="updateClock(); setInterval('updateClock()', 1000)"> 
    <div style="clear: both;"> </div> 
    <h1>What time is it?</h1> 
    <p>Ideally this will have a button that will play the time.</p> 
    <div id="clockcontainer"> 
     <span id="clock">&nbsp;</span> 
    </div> 
    <div id="voicebuttoncontainer"> 
     <button id="voicebutton" onclick="playSound(currentHours,currentMinutes)">Hear the time</button> 
    </div> 

currentHoursパラメータとcurrentMinutesパラメータは、ページの時刻を自動的に更新する関数の一部です。この部分は、オーディオファイルが重複しているか、連続して再生されていないことを除いて、現時点でスムーズに動作しているようです。

私のJavaScript関数は、読み取ります。時間が完了した後にのみ、あなたがMNプレイを作る方法についての提案がある場合

// Function to play audio file 
function playSound(hour,minute) { 
    var path = "~/www/clock/recordings/" 
    var hr = new Audio(path + hour + ".mp3"); 
    var mn = new Audio(path + minute + ".mp3"); 
    hr.play(); 
    mn.play(); 
} 

私はそれらをいただければ幸いです。

UPDATE、2017年11月20日:あなたが以下のコメントを読めば、あなたは)サイバー・シャドウ@非常に親切に私は私の最初のプレイ(にイベントハンドラをアタッチするために必要なことを識別することによってこの問題を解決する助けたことがわかります関数。それは大きな助けとなった。

しかし、数週間後、私の機能はモバイルまたはデスクトップのSafariで動作していないことに気付きました。

未処理の約束拒絶:NotAllowedError(DOM例外35):私は、次のエラーメッセージを受信したユーザがアクセス権を拒否されたため、要求はおそらく、ユーザーエージェントまたは現在のコンテキストでプラットフォームによって許可されていません。

Safari(デスクトップとモバイル)や他のモバイルブラウザの自動再生の制限に関連しているようです。たとえば、Safariの6月の発表は次のとおりです。https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/

いずれにしても、この制限を回避するために、最初の再生と同じスコープで最初にトリガーされた2番目のplay()関数をネストされた関数から取り出しました)関数を呼び出し、pause()関数でそれをフォローしました。これに...

// Function to play audio file 
function playSound(hour,minute) { 
    hr.play(); 
    $(hr).on("ended", function() { 
     mn.play(); 
    }); 
} 

:具体的には、この関数はこのから行った

// Function to play audio file 
function playSound(hour,minute) { 
    hr.play(); 
    mn.play(); // NEW ROW 
    mn.pause(); // NEW ROW 
    $(hr).on("ended", function() { 
     mn.play(); 
    }); 
} 

は、最初の再生機能は私がに概説されているイベントハンドラを利用することを許可された直後に再生機能をトリガ詳しくは以下をご覧ください。

答えて

1

できることは、jQueryイベントリスナーを使用することです。

$("hr").on("ended", function() { 
mn.play(); 
}); 

これは、最初のオーディオが終了したときにトラッキングし、2番目のオーディオを再生することができます。

注:サイバー影@<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
+0

おかげにこのコードを追加し、jQueryのを使用できるようにするには - 私はおそらくobvsここで何かを見下ろすだが、あなたは私にどのように少しより多くの情報を与えることができますこれを統合しますか? 元の投稿でjavascriptを修正してみましたので、次のようになります: hr.play(); $( "audio")。on( "ended"、function(){ mn.play(); }); } ...でも動作しません。 – scaffolding

+0

それは、@ Cyber​​Shadow – scaffolding

+0

@スカフォールディングありがとう、ありがとう –

関連する問題