React и Howler.js - случайно воспроизводить дополнительные ноты? - PullRequest
Новая
       36

React и Howler.js - случайно воспроизводить дополнительные ноты?

0 голосов
/ 02 ноября 2018

Я использую Howler.js с тестовым приложением React.

Я загрузил аудио-спрайт, который создал сам. Ноты имеют одинаковую длину и одинаковое расстояние. Я связываю каждую ноту с клавишей, которую пользователь нажимает для воспроизведения звука. Вот как я создаю спрайт с помощью Howler: 

import {Howl, Howler} from "howler";

const keyArr = [
    "a", "w", "s", "e", "d", "f", "t", "g", "y", "h", "u", "j", "k"
];

const makeSoundSprite = () => {
    let sprite = {};
    for(let i=1; i<=13; i++) {
        sprite[keyArr[i-1]] = [i*800, 600];
    }
    return sprite;
};

export const bassSounds = new Howl({
    src: ["sounds/bass.mp3"],
    html5: true,
    sprite: makeSoundSprite()
});

Все звуки в спрайте сами по себе прекрасно воспроизводятся. Проблема возникает при воспроизведении множества звуков подряд.

Случайно - без какого-либо явного срабатывания - некоторые «призрачные» ноты будут воспроизводиться после нажатия клавиши. Иногда это будет только одна заметка, а иногда это будет несколько заметок в случайном порядке. И в других случаях, это будет весь аудиофайл, из которого сделан спрайт, воспроизводимый до конца.

Это поведение также не зависит от используемого аудиофайла. Это происходит во втором файле с совершенно другими данными, хотя длительность и расстояние между примечаниями одинаковы.

Вот как я сейчас обрабатываю воспроизведение звуков в моем компоненте React: 

import React, {Component} from "react";

import {bassSounds} from "../../data/sounds";

class Instrument extends Component {
    handleKeyPress = (e) => {
        const sounds = bassSounds;
        if(sounds._sprite && sounds._sprite[e.key]) {
            console.log("Key Pressed: ", e.key);
            sounds.play(e.key);
        }
    }

    render() {
        return (
            <div 
                className="instrument"
                tabIndex="0"
                onKeyPress={this.handleKeyPress}
            /> 
         )
    }
}

export default Instrument;

Оператор console.log в моей функции handleKeyPress не отображается, когда воспроизводятся эти «призрачные» ноты. Он появляется только после того, как я нажму одну из клавиш, перечисленных в keyArr. Поэтому я уверен, что эта функция не вызывается без моего ведома.

И поэтому я очень смущен тем, что здесь происходит. Это ошибка в Howler.js? Потому что не имеет никакого смысла, почему весь аудиофайл будет случайным образом воспроизводиться из ниоткуда.

Пожалуйста, дайте мне знать ваши мысли. Спасибо

UPDATE

Установка свойства html5 в false, похоже, ведет себя намного лучше. До сих пор я не заметил никаких «призрачных» заметок. Хотя я не проверял это достаточно подробно, чтобы быть уверенным.

Но что, если вообще что-либо, было бы связано с использованием HTML5 Audio API с этим явлением?

...