Plugin:

export default class AudioUploader extends Plugin {

  static get pluginName() {
    return 'AudioUploader';
  }

  static get requires() {
    return [];
  }

  init() {
    const editor = this.editor;
    const schema = editor.model.schema;

    schema.register('audio', {
      allowIn: ['$root', '$block', 'blockQuote', 'paragraph'],
      isBlock: true,
      allowAttributes: ['controls', 'src'],
    });

    editor.conversion.elementToElement({
      model: 'audio',
      view: {
        name: 'audio',
      },
    });

    editor.conversion.for( 'dataDowncast' ).elementToElement({
      model: 'audio',
      view: {
        name: 'audio',
      },
    });

    editor.conversion.for( 'upcast' ).elementToElement({
      model: 'audio',
      view: {
        name: 'audio',
      },
    });

    editor.ui.componentFactory.add('AudioUploader', () => {
      const view = new FileDialogButtonView();

      view.buttonView.set({
        tooltip: 'Добавить аудио',
        icon: MusicIcon,
      });

      view.on('done', (evt, files) => {
        getBase64(Array.from(files)[0], (audio) => {
          editor.model.change(writer => {
            const elem = writer.createElement('audio', {
              src: audio,
              controls: true,
            });

            editor.model.insertContent(elem, editor.model.document.selection.getFirstPosition());
          });
        });
      });

      return view;
    });
  }
}

If you insert just text(writer.insertText('some text', editor.model.document.selection.getFirstPosition());), then everything will be inserted correctly.

Everything is correct in the ckeditor5 inspector. I don’t understand the philosophy of adding arbitrary tags to the editor.

Why isn't it showing up in the editor? Why is the content not correct in console?