Custom Audio Blot in Quill - Add/Remove issue

Question

I have tried to add "AudioBlot" in ionic 4 Mobile application using the below codes and added successfully.I can do all the manipulation in the audio.

When I am trying to remove(using keyboard) the audio, it won't get remove.

In the html(while debuging), it added like <p><audio src="agjdfj..."></audio></p>.

How to remove the audio tag as similar to the text removal from the editor? I am trying to type, It wont add it after the audio tag.

import * as Quill from 'quill';
const BlockEmbed = Quill.import('blots/embed');

class CustomAudioBlot extends BlockEmbed {
  static blotName: string;
  static tagName: string;
  static create(url) {
    let node: any= super.create(url);
    node.setAttribute('src', url);
    return node;
  }
  static value(node) {
    return node.getAttribute('src');
  }
}
AudioBlot.blotName = 'audio';
AudioBlot.tagName = 'audio';
Quill.register(CustomAudioBlot);

Adding the custom audio by using the below code

Option 1 : (data) means - Base 64 contetent
  const audio = "<audio controls controlslist='nodownload' src='" + data + "'></audio>";
    this.quillEditorRef.clipboard.dangerouslyPasteHTML(this.index, audio, 'user');

Option 2: 
     this.quillEditorRef.insertEmbed(this.index, 'audio', data,'user');