एक HTML स्रोत वस्तु

Question

मैं एक छोटे से एचटीएमएल विस्तार जो कोई टैग (uai) जो की तरह <uai src="some_what_file.mp3" controller="nav" autoplay="true">

स्वरूपित किया जाएगा और इसलिए इस टैग पर सौंपा javascript ऑब्जेक्ट मिल जाएगा प्रदान करता है बनाना चाहते हैं बनाना।

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

लेकिन मुझे आश्चर्य है कि कैसे मैं HTML टैग करने के लिए एक वस्तु के रूप में इस समारोह लागू करते हैं और एचटीएमएल टैग this.src

के स्रोत लागू करने के लिए इस वस्तु इनपुट टैग के समान होगा कर देगा *

---

मुझे पता है कि ऑडियो टैग मौजूद है, और मुझे पूरी तरह से पता है कि इसका उपयोग कैसे करें। लेकिन मैं इस के साथ ऑडियो टैग और कार्यों को प्रतिस्थापित करना चाहता हूं। इससे मेरे लिए कैनवास समर्थित ऑडियो अंक बनाना आसान हो जाएगा, इसलिए मुझे इसकी आवश्यकता है।

Answer 1

आप कस्टम तत्वों का उपयोग करने के क्या आप वाकई उस में उपयोग नहीं किया जाएगा होने के लिए अपने टैग के नाम पर एक हाइफन - डालने की आवश्यकता चाहते हैं भविष्य के मानक, उदाहरण के लिए: <ultimate-audio>।

आपको कस्टम तत्व विनिर्देशों के का उपयोग करना चाहिए, जो का उपयोग document.registerElement() के बजाय एक नया तत्व पंजीकृत करने के लिए करता है।

अंतिम, आप extends:'audio' विकल्प का उपयोग नहीं कर सकते हैं यदि आप एक नया टैग बनाना चाहते हैं।

आप सभी आधुनिक ब्राउज़रों में class परिभाषा का उपयोग कर सकते हैं: ulimate-ऑडियो के

सामग्री।एचटीएमएल:

<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>, आप एक <style> तत्व जोड़ सकते हैं जहां में परिभाषित किया गया है। तो फिर तुम इस तरह अपने टैग का उपयोग कर सकते हैं:,

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

body में नए टैग का उपयोग करें::

header में कस्टम तत्व शामिल हैं,

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

तरीकों play(), stop(), और गुण src और autoplay को जावास्क्रिप्ट का उपयोग किया जा सकता है:

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

Answer 2

आप इसे किसी भी अन्य तत्व की तरह एक्सेस कर सकते हैं और ऐसा करने के लिए आपको जो करना है, वह कर सकते हैं।

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

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

आप यद्यपि के बारे में पता होना चाहिए दो महत्वपूर्ण कैच हैं:

सबसे पहले, यह स्वत: बंद होने नहीं हो सकता। ब्राउज़र एक विशेष तरीके से स्वयं-बंद तत्वों (<cookies />) को संभालते हैं, और आप कस्टम स्व-समापन टैग नहीं बना सकते हैं (यह भी एक सीमा है कि कोणीय जैसे ढांचे को निपटना है)। इसके पास एक बंद टैग होना चाहिए, भले ही उसके बच्चे न हों: <cookies></cookies>

दूसरा, आप document.querySelector('cookies').flavor जैसी चीजें नहीं कर सकते हैं और सीधे संपत्ति तक पहुंच सकते हैं। आपको document.querySelector('cookies').getAttribute('flavor') या .setAttribute() का उपयोग करने की आवश्यकता है। आप फिर भी लागू कर सकते हैं यह अपने आप को बाद के उपयोग करने के लिए:

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

एक transpiler कि वर्गों का समर्थन और फैली हुई है बहुत आसान है का उपयोग करना।

class UAIElement extends HTMLElement { 

} 

document.registerElement('uai', UAIElement); 

सादा जे एस संस्करण:

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