Question

您好我想开始在特定位置播放声音。 api说我可以使用.pos但它不会从我希望它开始的地方开始

  <p>This sound last 13 sec.</p>
  <h1>Audio</h1>
  <h3><a href="#" class="val2">2:00</a></h3>
  <h3><a href="#" class="val3">3:00</a></h3>
  <h3><a href="#" class="val4">4:00</a></h3>
  <h3><a href="#" class="val20">10:00</a></h3>

我的javascript。

var son = [false, "0000"]

sound = new Howl({
    urls: ['http://goldfirestudios.com/proj/howlerjs/sound.mp3'],
    autoplay: false
    });

function playSequence(events,valeur){

  //if there is no sound play the track at a certain position
  var playSound = function(valeur){
    if(son[0] == true){
      sound.stop();
      son[0] = false;
    }else{
      son[0] = true;
      sound.pos = parseInt(valeur[0]); // position at 2 sec
      sound.play();
    }
  }
   playSound(valeur);
}

//play the sound on click
$("a.val2").on('click', function(events){
    valeur = $(this).text();
    playSequence(events, valeur);
    });

Answer 1

pos是一种方法，而不是属性。为了获得最佳兼容性，您可能希望像下面这样播放（在2.0 beta分支中修复）：

sound.play(function(id){
    sound.pos(valeur[0], id);
});

以下是如何在2.0中执行此操作（在https://github.com/goldfire/howler.js检查2.0分支）：

var id = sound.play();
sound.seek(valeur[0], id);

如果您只播放一个声音，则无需设置ID，但最好在使用1.1.x后播放后更改位置。

Answer 2

您可以使用Sprites！

var sound = new Howl({
  src: ['sounds.webm', 'sounds.mp3'],
  sprite: {
    blast: [0, 3000],
    laser: [4000, 1000],
    winner: [6000, 5000]
  }
});

// Shoot the laser!
sound.play('laser');

：）

我在此链接How to Create and use Sprites

中找到了它

Answer 3

我在特定时间播放声音时也遇到问题，它在第一次播放时有效，但如果我尝试返回并再次播放该声音，立即使用 seek 不会工作。

我刚刚找到了一种使用 howler v2 使其始终如一地工作的方法：

function playSoundAtPosition(sound, pos) {
  sound.once("play", () => {
    sound.seek(pos);
  });
  sound.play();
}

这利用了回调方法 once，它会触发对 play 事件的回调，然后立即删除自身。我相信这会有所帮助，因为它会等到它真正知道正在播放的声音，然后才会寻找所需的时间。

我知道这是一个老问题，但希望对遇到此问题的人有用！

howler.js在特定位置播放声音

3 个答案: