Creating an HTML source object

Question

I want to create a small HTML extension that provides a ( uai ) tag that will be formatted as <uai src="some_what_file.mp3" controller="nav" autoplay="true">

And so on, this tag will receive the javascript object assigned.

 function uai(){ this.src = { ... } this.controller = { ... } this.autoplay = { ... } } 

But I am wondering how I will apply this function as an object to the html tag and make an HTML tag to apply the source to this.src

This object will look like an input tag *

---

I know that there is an audio tag, and I fully know how to use it. But I want to replace the sound tag and functions with this. This will make it easier for me to create canvases with sound tag support, so I need this.

Answer 1

If you want to use custom elements, you need to insert a hyphen in the name of your tag to make sure that it will not be used in the future standard, for example: <ultimate-audio> .

You should also use version 1 of the Custom Elements specification, which uses customElements.define() instead of document.registerElement() to register a new element.

Finally, you cannot use the extends:'audio' parameter if you want to create a new tag.

You can use the class definition in all modern browsers:

Content ulimate-audio.html:

 <template> <h3>UAI</h3> <nav> <button id=PlayBtn>Play</button> <button id=StopBtn>Stop</button> <input id=AutoplayCB type=checkbox disabled>Auto-Play <div>Source : <output id=SourceOut></output></div> </nav> </template> <script> ( function ( owner ) { class UAI extends HTMLElement { constructor () { super() this.model = {} this.view = {} } connectedCallback () { //View this.innerHTML = owner.querySelector( 'template' ).innerHTML this.view.autoplay = this.querySelector( '#AutoplayCB' ) this.view.source = this.querySelector( '#SourceOut' ) //Model //autoplay var attr = this.getAttribute( 'autoplay' ) this.model.autoplay = typeof attr == 'string' && ( attr == '' || attr == 'true' ) //source this.model.source = this.getAttribute( 'src' ) //Model -> View this.view.source.textContent = this.model.source this.view.autoplay.checked = this.model.autoplay //[play] event var self = this this.querySelector( '#PlayBtn' ).addEventListener( 'click', function () { self.play() } ) this.querySelector( '#StopBtn' ).addEventListener( 'click', function () { self.stop() } ) //init if ( this.model.autoplay ) this.play() } play () { this.model.audio = new Audio( this.model.source ) this.model.audio.play() } stop () { this.model.audio.pause() } set src ( file ) { console.log( '%s.src=%s', this, file ) this.model.source = file this.model.audio.src = file this.view.source.textContent = file if ( this.model.autoplay ) this.model.audio.play() } set autoplay ( value ) { console.warn( 'autoplay=', value ) this.model.autoplay = ( value === "true" || value === true ) this.view.autoplay.checked = this.model.autoplay } } customElements.define( 'ultimate-audio', UAI ) } )( document.currentScript.ownerDocument ) </script> 

The user interface of your control is defined in <template> , where you can add a <style> element. Then you can use your tag as follows:

In the header include the user element:

 <link rel="import" href="ultimate-audio.html"> 

In body use the new tag:

 <ultimate-audio id=UA src="path/file.mp3" autoplay></ultimate-audio> 

The play() , stop() methods, and the src and autoplay properties can be called by the javascript form:

 UA.src = "path/file2.mp3" UA.play() 

Answer 2

You can simply access it, like any other element, and do what you need to do.

 console.log(document.querySelector('cookies').getAttribute('flavor')) 

 <cookies flavor="chocolate chip"></cookies> 

There are two important catch you should be aware of:

Firstly, it cannot be self-closing. Browsers handle self-closing elements ( <cookies /> ) in a special way, and you cannot create your own self-closing tags (this is also a limitation that you have to deal with such frameworks as Angular). It must have a closing tag, even if it has no children: <cookies></cookies>

Secondly, you cannot do things like document.querySelector('cookies').flavor and directly access the property. You need to use document.querySelector('cookies').getAttribute('flavor') or .setAttribute() . However, you can apply it to use the latter:

 Array.prototype.slice.call(document.querySelectorAll('cookies'), 0).forEach(cookie => Object.defineProperty(cookie, 'flavor', { get: () => cookie.getAttribute('flavor'), set: (value) => cookie.setAttribute('flavor', value) })); let cookie = document.querySelector('cookies'); console.log(cookie.flavor); cookie.flavor = 'sugar'; console.log(cookie.flavor); console.log(cookie); 

 <cookies flavor="chocolate chip"></cookies> <cookies flavor="peanut butter"></cookies> 

Answer 3

Using a transporter that supports classes and extensions is very simple.

 class UAIElement extends HTMLElement { } document.registerElement('uai', UAIElement); 

simple js version:

 document.registerElement('uai', { prototype: Object.create(HTMLElement.prototype, { extends: 'audio' }) });