0

質問のタイトルがあまり意味をなさないことは知っていますが、それをより適切に表現する方法は考えられません。私はjQueryの初心者であり、このコードを使用してフェードインし<div>、サウンドを再生しています。

$(document).ready(function(){

    $('#speech').fadeIn('medium', function() {

        play('msg_appear');

        var sptx = $('<p class="stext">').text('There is nothing here.');

        $('#speech').append(sptx);
        $('.stext').typeOut({marker: '', delay: 22});

    });

});

このコードは正常に実行されますが、フェードインが完了した後にサウンドが再生されます。フェードイン中に再生したかったので、次のようにplay()フェードイン関数の外に呼び出しを配置し​​てみました。

$(document).ready(function(){

    play('msg_appear');

    $('#speech').fadeIn('medium', function() {

ただし、現在はまったく再生されていません。JavaScriptコンソールにはエラーがないので、それが構文エラーであるかどうかはわかりませんが、おそらく明らかなことですが、何が原因かわかりません。

play()は私がオーディオを再生するために見つけた機能です、ここにそれがまったく重要であるかどうかです。上記のコードと同じファイルに配置しました。の真上$(document).ready()。

function play(sound) {

    if (window.HTMLAudioElement) {
      var snd = new Audio('');

      if(snd.canPlayType('audio/ogg')) {
        snd = new Audio(sound + '.ogg');
      }
      else if(snd.canPlayType('audio/mp3')) {
        snd = new Audio(sound + '.mp3');
      }

      snd.play();
    }
    else {
      alert('HTML5 Audio is not supported by your browser!');
    }
  }
4

3 に答える 3

2

コメントに基づいて、play()見つけた関数を変更することをお勧めします。

function play(sound, callback) {
    if (window.HTMLAudioElement) {
        var snd = new Audio('');
        if(snd.canPlayType('audio/ogg')) {
            snd = new Audio(sound + '.ogg');
        }
        else if(snd.canPlayType('audio/mp3')) {
            snd = new Audio(sound + '.mp3');
        }
        if(typeof(callback)=="function"){
            snd.addEventListener("canplay", function(){
                snd.play();
                callback();
            });
        } else {
            snd.addEventListener("canplay", function(){
                snd.play();
            });
        }
        snd.load();
    }
    else {
        alert('HTML5 Audio is not supported by your browser!');
    }
}

次に、次のように呼び出します。

play('msg_appear', function(){
    $('#speech').fadeIn('medium', function() {

        var sptx = $('<p class="stext">').text('There is nothing here.');

        $('#speech').append(sptx);
        $('.stext').typeOut({marker: '', delay: 22});

    });
});

そうすれば、オーディオのplay();再生が開始されるまでオーディオは起動せず、オーディオfadeIn()と同時に開始されます。
もちろん、コールバックは必要ありません。さまざまなネットワーク条件でより堅牢なタイミングを実現するだけです.

于 2012-11-25T23:02:56.443 に答える
0

$(document).readyによって遅延されていない場合、（この問題が発生しているブラウザで）再生を実行するには時期尚早だと思いますfadeIn。

試す ：

$(window).on('load', function(){
    play('msg_appear');
    $('#speech').fadeIn('medium', function() {
        var sptx = $('<p class="stext">').text('There is nothing here.');
        $('#speech').append(sptx);
        $('.stext').typeOut({marker: '', delay: 22});
    });
});

編集：

必要に応じて、次のようにさらに遅延を導入できます。

$(window).on('load', function(){
    setTimeout(function() {
        play('msg_appear');
        $('#speech').fadeIn('medium', function() {
            var sptx = $('<p class="stext">').text('There is nothing here.');
            $('#speech').append(sptx);
            $('.stext').typeOut({marker: '', delay: 22});
        });
    }, 1000);//adjust up/down to the minimum reliable value
});
于 2012-11-25T22:25:35.467 に答える
0

まず、以下を参照してください: HTML5 Audio onLoad ローディング状態を処理するにはいくつかの方法があります。受け入れられた答えは奇妙に見えます。

次のようなコードをお勧めします。

function makePlayer(sound){
  if (window.HTMLAudioElement) {
      var snd = new Audio('');

      if(snd.canPlayType('audio/ogg')) {
        snd = new Audio(sound + '.ogg');
      }
      else if(snd.canPlayType('audio/mp3')) {
        snd = new Audio(sound + '.mp3');
      }

      return function(){
        snd.play();
      };
    }

};

var play = makePlayer('msg_appear');

$(document).ready(function(){

    $('#speech').fadeIn('medium', function() {

        play();

        var sptx = $('<p class="stext">').text('There is nothing here.');

        $('#speech').append(sptx);
        $('.stext').typeOut({marker: '', delay: 22});

    });

});
于 2012-11-25T23:03:34.223 に答える