制作HTML源对象

Question

我想创建一个小的HTML扩展,它提供了一个tag(uai),格式就像<uai src="some_what_file.mp3" controller="nav" autoplay="true">

等标签将分配一个javascript对象.

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

但我想知道如何将此函数作为对象应用于html标记并使HTML标记应用源 this.src

此对象类似于输入标记*

---

我知道音频标签存在,我完全知道如何使用它.但我想用这个替换音频标签和功能.这将使我更容易制作画布支持的音频标记,这就是我需要它的原因.

Answer 1

如果您想使用自定义元素，您需要-在标签名称中插入连字符，以确保它不会在未来的标准中使用，例如：<ultimate-audio>。

另外，您现在应该使用自定义元素规范的版本 1customElements.define() ，它使用而不是document.registerElement()注册新元素。

extends:'audio'最后，如果您想创建新标签，则无法使用该选项。

您可以class在所有现代浏览器中使用该定义：

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>

您控件的 UI 在 中定义<template>，您可以在其中添加<style>元素。然后你可以像这样使用你的标签：

在 中header，包含自定义元素：

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

在 中body，使用新标签：

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

方法play()、stop()、属性src和autoplay可以从 javascript 中调用：

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