Question

我知道问题标题没有多大意义，但我想不出一个更好的方法来表达它。我是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!'); } }

Answer 1

根据评论，我建议您修改找到的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()将与音频同时启动。
当然，回调是没有必要的;它只是在不同的网络条件下提供更强大的时序。

Answer 2

我只能认为$(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
});

Answer 3

首先，请参阅：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});

    });

});

JavaScript音频不能在jQuery函数之外播放

3 个答案:

编辑：