Блог

У меня есть простой веб-элемент HTML со встроенным аудиомагнитофоном. Я бы хотел, чтобы рекордер автоматически начинал запись при загрузке. Я испытываю какое-то очень странное поведение, когда запись работает, когда я перекомпилирую приложение, а не иначе. Если я обновляю страницу в уже скомпилированной версии приложения, я получаю пустой буфер записи.

Вот ключевые части моего кода:

 const MicRecorder = require("mic-recorder-to-mp3");
...

class Microphone extends HTMLElement {
  constructor() {
    super();
    // Add a shadow DOM
    const shadowDOM = this.attachShadow({ mode: "open" });
    this.shadowDOM = shadowDOM;

    // Render
    this.shadowDOM.appendChild(template.content.cloneNode(true));

    ...

    // Bind methods
    this.toggleRecord = this.toggleRecord.bind(this);
  }

  connectedCallback() {
    if (this.startRecording) {
      this.toggleRecord();
    }
  }

toggleRecord() {
    const recordButton = this.shadowRoot.querySelector("#record-button");

    if (this.isRecording()) {
      this.recorder
        .stop()
        .getMp3()
        .then(([buffer, blob]) => {...})
    } else {
      this.recorder
        .start()
        .then(() => {...})
    }
  }