Question

我想创建一个小的HTML扩展，它提供一个标记（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

您可以像访问任何其他元素一样访问它，并执行您需要执行的操作。

＆＃13;

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

＆＃13;

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

＆＃13;

您应该注意两个重要的捕获：

首先，它无法自我关闭。浏览器以特殊方式处理自闭元素（<cookies />），并且您无法创建自定义自关闭标记（这也是Angular等框架必须处理的限制）。它必须有一个结束标记，即使它没有子标记：<cookies></cookies>

其次，您无法执行document.querySelector('cookies').flavor之类的操作并直接访问该属性。您需要使用document.querySelector('cookies').getAttribute('flavor')或.setAttribute()。但是你可以自己应用它来使用它：

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 2

使用支持类和扩展的转换器非常容易。

class UAIElement extends HTMLElement {

}

document.registerElement('uai', UAIElement);

普通的js版本：

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

Answer 3

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

此外，您现在应该使用自定义元素规范的version 1，该规范使用customElements.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>

您可以在<template>中定义您控件的UI，您可以在其中添加<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()

制作HTML源对象

3 个答案: