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 回答