A music player that uses WEB components: Melodyplayer

Preview the effect first:

WEB components

First, what is WEB components?

The definition for MDN is:

WEB components is a different set of technologies that allow you to create reusable custom elements that encapsulate your code and use them in your Web app.
... ...
The basic approach to implementing Web Component is usually as follows:

1. Use the ECMASCRIPT 2015 class syntax to create a class that specifies the functionality of the Web Component (see classes for more information).
2. Use the CustomElementRegistry.define() method to register your new custom element and pass it to the element name that you want to define, the class that specifies the function of the element, and optionally, the element that inherits from it.
3. If necessary, use Element.attachShadow() a method to attach a Shadow DOM to a custom element. Use the usual Dom method to add child elements, event listeners, and so on to the Shadow DOM.
4. Use <template> and <slot> method to define an HTML template, if necessary. Clone the template again using the regular Dom method and attach it to your Shadow dom.
5. Use custom elements in any location on the page that you like, just as you would with regular HTML elements.

To speak is to define a class first

classextends{    constructor{        super();  // 一定要先调用 super        // 为所欲为    }}

In the inside to achieve the necessary functions, such as to add child elements and event listeners, set the style, and so on, as in the usual JS code.

Then, register this element:

window.customElements.define('my-compo', MyCompo)

According to the Customelements v1 standard, the name of the custom element must contain a horizontal line.

Finally, write this tag in HTML:

<my-compo></my-compo>

The label must have an end tag corresponding to it and cannot use a self-closing label.

Then you can fully enjoy the fun of customelements, it is not very simple (Error

Typically, Custom Elements is used in conjunction with Shadowdom. So what is Shadowdom?

Shadowdom

The definition for MDN is:

An important aspect of Web are encapsulation-being able to keep the markup structure, style, and behavior Hidd En and separate from other code on the page so that different parts does not clash, and the code can is kept nice and clean. The Shadow Dom API is a key part of this, providing a-a-attach a hidden separate DOM to an element.

Probably translated:

Encapsulation is an important part of WEB components, and you can isolate the DOM tree structure, style, and behavior logic of elements from other parts of the page to avoid conflicts and keep your code neat. The Shadow Dom API is a key part of this, providing a way to insert hidden DOM subtrees into an element.

In short, the Shadow Dom API can insert an isolated DOM subtree inside any element, where elements and styles remain isolated from the external dom without affecting the outside. So there's no need to worry about conflicting CSS code.

With all that said, what about compatibility?

Sorry to disturb you. (

But we can use Polyfill, such as this webcomponentsjs, which is not introduced here.

My Blog Park page has been added to inject Polyfill code, if your browser does not load correctly, it really changed the browser ...

<script>(function(){    ConstSd= ' Attachshadow ' inch Element.prototype;    ConstCe= ' customelements ' inchWindow;    if(!Sd&& !Ce{        Document.Write(' <script src= ' https://files.cnblogs.com/files/rocket1184/webcomponents-sd-ce.js ' ><\/script> ' )return;    }    !Ce&& Document.Write(' <script src= ' https://files.cnblogs.com/files/rocket1184/custom-elements.min.js ' ><\/script> ' )!Sd&& Document.Write(' <script src= ' https://files.cnblogs.com/files/rocket1184/shadydom.min.js ' ><\/script> ')})();</script>

Melodyplayer

Amount, off the topic, the purpose of today's article is to introduce the player Ah, player player ~ ~ ~

First, the player supports two modes, one is the single mode, like this:

After the default playback stop, you can also click on the right of the second button to switch to Single cycle mode.

Then there is the list mode, as shown at the beginning of the article, with the previous and Next buttons, and the default playlist stops once again. You can also select a list loop, single loop, or Random mode.

The rightmost buttons expand/close the lyrics panel. Supports one or two lyrics simultaneously, as well as smooth scrolling animations. The lyrics will be prompted after the load fails.

Technology stack and optimization

The JS section uses ECMAScript 2015 of various grammars, as well as JSX. But instead of using React, we use Babel to customize the JSX and @pragma implement a custom one createElement . Webpack configuration can be found here.

The CSS section uses less, but does not generate a standalone style file, nor does it use Style-loader. In the Webpack configuration, only the Less-loader will be *.less translated and *.css then use Css-loader to parse the part of the CSS url() and add the parsed CSS string to the Shadowroot in the JS code. Under

The icon uses Google's Material Design Icons, but there is no full-scale introduction. I only extracted the 10 icons needed to create a subset of the fonts, less than 1KB in size. Then use Url-loader to convert the font to the Data URL and inline in the CSS. For the method and principle of compressing fonts, please visit my independent blog: Make Material Icons icon font for extreme compression

After the above optimization, the whole melody-player.min.js is less than 23KB in size.

Finally, attach the GitHub link and welcome Star ~

GitHub Warehouse: Rocka/melody-player
GitHub Demo:melodyplayer Demo

A music player that uses WEB components: Melodyplayer