polymer ajax

什么是聚合物？ (What is Polymer?)

Polymer is a shim for a new web standard called Web Components, which enables us to create completely custom HTML elements.

Polymer是称为Web Components的新Web标准的填充程序，它使我们能够创建完全自定义HTML元素。

There are native web elements that we use every day, such as <input>, <checkbox>, <audio>, and so on. Their number is limited and their design and behavior are being defined by browsers, not by developers. With Web Components, we can now create a custom <element> and define its style and behavior. Unfortunately, because this standard is very new, it will take some time until all browsers support it.

我们每天都会使用本机Web元素，例如<input> ， <checkbox> ， <audio>等等。 它们的数量是有限的，它们的设计和行为是由浏览器而不是开发人员定义的。 使用Web组件，我们现在可以创建自定义的<element>并定义其样式和行为。 不幸的是，由于该标准是非常新的，因此所有浏览器都需要一段时间才能支持它。

Luckily for us, there's a couple of open source libraries being actively developed that allow creating and using Custom Elements today: Polymer (Google) and X-Tag (Mozilla). This summer, during the I/O summit, the Polymer team introduced v1.0 and announced that it is now production-ready.

对我们来说幸运的是，有两个正在积极开发的开放源代码库，这些库现在允许创建和使用自定义元素：Polymer（Google）和X-Tag（Mozilla）。 今年夏天，在I / O峰会上，Polymer团队推出了v1.0，并宣布它已可以投入生产。

什么是自定义元素？ (What is a Custom Element?)

Say, you have a blog and need to add audio tracks to some of your posts (for example, music tracks or podcasts). The most convinient way to do this would be to use a native <audio> element. It's simple to use and can't conflict with any surrounding code. Just paste <audio controls src="track.mp3">, and you would get a 100% controlled result that would look like this:

假设您有一个博客，并且需要向某些帖子（例如，音乐曲目或播客）添加音轨。 最方便的方法是使用本机<audio>元素。 它使用简单，并且不会与任何周围的代码冲突。 只需粘贴<audio controls src="track.mp3"> ，您将获得100％的受控结果，如下所示：

But what if you'd like it to look differently? Or have some additional features, such as displaying timing and title? And on top of that, you want to keep it simple and modular, just like the native solution.

但是，如果您希望它看起来有所不同怎么办？ 还是具有一些其他功能，例如显示时间和标题？ 最重要的是，您希望使其保持简单和模块化 ，就像本机解决方案一样。

Say, we'd like to build something like this:

说，我们想建立这样的东西：

This is where Web Components and Polymer come into play. When we have a Custom Element, we can use it as simply as the native one:

这就是Web组件和Polymer发挥作用的地方。 有了自定义元素后，我们可以像使用原生元素一样简单地使用它：

@media (max-width: 1280px) { .go-go-gadget-react img:first-child { display: none; } }@media (max-width: 780px) {.go-go-gadget-react { flex-direction: column; }.go-go-gadget-react img { margin-left: 0 !important; margin-bottom: 12px !important; }.header-thingy { margin-top: 20px; }.button-thingy { margin-left: 0 !important; margin-top: 12px !important; }} @media (max-width: 1280px) { .go-go-gadget-react img:first-child { display: none; } }@media (max-width: 780px) {.go-go-gadget-react { flex-direction: column; }.go-go-gadget-react img { margin-left: 0 !important; margin-bottom: 12px !important; }.header-thingy { margin-top: 20px; }.button-thingy { margin-left: 0 !important; margin-top: 12px !important; }}

<my-super-audio src="track.mp3"></my-super-audio>

How cool is that?

多么酷啊？

Also, imagine that you can encapsulate all your re-usable UI elements into custom HTML tags and use them across different applications. You can be sure that there won't be any conflicts between the application's code and your Custom Element's code.

另外，假设您可以将所有可重复使用的UI元素封装到自定义HTML标记中，并在不同的应用程序中使用它们。 您可以确定应用程序的代码与“自定义元素”的代码之间不会有任何冲突。

How is it possible?

这怎么可能？

影子DOM (Shadow DOM)

When you insert a plain <input> element on any web page, it always looks the same and never conflicts with your code. But <input> has built-in styling, some public APIs, and it reacts on click events, meaning it has some JavaScript logic. Have you ever thought about how these native elements work?

当您在任何网页上插入普通的<input>元素时，它看起来总是相同的，并且不会与您的代码冲突。 但是<input>具有内置样式，一些公共API，并且它对单击事件做出React，这意味着它具有一些JavaScript逻辑。 您是否考虑过这些原生元素如何工作？

Probably not, because when you inspect your page in the browser Developer Tools, all you can see is <input> and no additional <scripts>. So where does <input> hide its CSS and JS?

可能不是，因为在浏览器开发人员工具中检查页面时，您只能看到<input>而没有其他<scripts> 。 那么<input>在哪里隐藏它CSS和JS？

In Shadow DOM.

在Shadow DOM中 。

To see it:

看见了：

1. Open Developer Tools ( Alt+Cmd+i ) in Chrome. 在Chrome中打开开发人员工具（ Alt+Cmd+i ）。
2. Open Settings ( Fn+F1 ) and enable Show user agent shadow DOM. 打开设置（ Fn+F1 ）并启用显示用户代理阴影DOM 。
3. Reload Chrome. 重新加载Chrome。
4. Inspect any <audio> tag ( right-click on input field -> Inspect ).检查任何<audio>标签（右键单击输入字段-> Inspect ）。

Now you should see the hidden code in its Shadow DOM.

现在，您应该在其Shadow DOM中看到隐藏的代码。

When you create a Custom Element, you hide its styling, behavior and markup in Shadow DOM. This ensures that nothing can reach it from Light DOM, where your application lives.

创建自定义元素时，您将其样式，行为和标记隐藏在Shadow DOM中。 这样可以确保从应用程序所在的Light DOM都无法到达它。

让我们开始吧！ (Let's build!)

Today we're building a custom <my-super-audio> element from the screenshot above. To get a feeling of where we're going, check out this open source player.

今天，我们正在上面的屏幕快照中构建自定义的<my-super-audio>元素。 要了解我们的发展方向，请查看此开源播放器 。

准备开发环境 (Prepare dev environment)

As a boilerplate for our Custom Element we will use the seed-element project prepared by the Polymer team. It provides a proper structure and a number of extremely useful built-in features, such as a server for local development, testing and a documentation page with demo.

作为自定义元素的样板，我们将使用Polymer团队准备的种子元素项目。 它提供了适当的结构和许多极其有用的内置功能，例如用于本地开发，测试的服务器以及带有演示的文档页面。

1. Download and unzip the source code of the latest release here.在此处下载并解压缩最新版本的源代码。
2. Rename the folder from seed-project to your element's name: my-super-audio.将文件夹从seed-project重命名为元素的名称： my-super-audio 。

Note: By convention, every Custom Element has to include at least one dash in its name.

注意：按照惯例，每个“自定义元素”的名称中必须至少包含一个破折号。

安装依赖 (Install dependencies)

Make sure you have Node, npm, git and Bower installed on your machine. Seed-project manages all the dependencies using Bower. To install them, open my-super-audio project folder and run:

确保在计算机上安装了Node ， npm ， git和Bower 。 Seed-project使用Bower管理所有依赖项。 要安装它们，请打开my-super-audio项目文件夹并运行：

bower install

本地网络服务器 (Local web server)

Because we're going to work with HTML imports, we need to run the project using a local server. If you don't have one, seed-project has a nice option built-in. To work with it, install it globally:

因为我们要处理HTML导入，所以我们需要使用本地服务器运行项目。 如果您没有一个，则seed-project会内置一个不错的选项。 要使用它，请全局安装：

npm install -g polyserve

When it's installed, run:

安装后，运行：

polyserve

This starts a web server locally on port 8080. Now you can see the default seed-element in the browser here: localhost:8080/components/seed-element/demo.

这将在端口8080上本地启动Web服务器。现在，您可以在浏览器中的以下位置查看默认的seed-element ： localhost:8080/components/seed-element/demo 。

Awesome! Now we can move on and code.

太棒了！ 现在我们可以继续进行编码。

创建一个聚合物元素 (Create a Polymer element)

First, we need to remove the seed-element and create our own my-super-audio element.

首先，我们需要删除种子元素，并创建自己的my-super-audio元素。

1. In the root folder of your project, rename seed-element.html to my-super-audio.html.在项目的根文件夹中，将seed-element.html重命名为my-super-audio.html 。
2. In the bower.json file, rename the project to my-super-audio too.在bower.json文件中，也将项目重命名为my-super-audio 。
3. Open my-super-audio.html and replace the existing <dom-module> code with this:打开my-super-audio.html并用以下代码替换现有的<dom-module>代码：

<dom-module id="my-super-audio"><template><p>{{author}}</p></template><script>Polymer({is: 'my-super-audio',properties: {author: String}});</script>
</dom-module>

By creating a <dom-module> tag with the same id as the Polymer.is property, we declare a custom Polymer-based element with this name.

通过创建一个与Polymer.is属性具有相同ID的<dom-module>标记，我们使用该名称声明一个基于Polymer的自定义元素。

Now, let's test it in our browser. To do this, we need to place our newly created element on the Demo page.

现在，让我们在浏览器中对其进行测试。 为此，我们需要将新创建的元素放置在“演示”页面上。

First, open index.html inside the /demo folder and edit the <link> element to import my-super-audio.html:

首先，在/ demo文件夹中打开index.html ，然后编辑<link>元素以导入my-super-audio.html ：

<link rel="import" href="../my-super-audio.html">

Now, place your element into the <body>, like this (change YOUR_NAME_HERE to your name):

现在，将您的元素放入<body> ，如下所示（将YOUR_NAME_HERE更改为您的名称）：

<body><my-super-audio author="YOUR_NAME_HERE">Hello World!</my-super-audio>
</body>

Open your Demo page in your browser: http://localhost:8080/components/my-super-audio/demo/, and you will see... your name.

在浏览器中打开您的演示页面： http://localhost:8080/components/my-super-audio/demo/ ，您将看到... 您的名字 。

Wait! Instead of the expected Hello World! we somehow display a string from the author attribute of our element. How did that happen?

等待！ 而不是预期的Hello World！ 我们以某种方式显示来自元素的author属性的字符串。 那是怎么发生的？

This is how Custom Elements work. Only the code inside of <dom-module> matters, not the code in the Light DOM. Because in our element's <template> we only display <p> which is bound to the author property of the Polymer element, this is the only visible data. Nothing else.

这就是“自定义元素”的工作方式。 仅<dom-module>的代码很重要，而不是Light DOM中的代码。 因为在元素的<template>我们仅显示绑定到Polymer元素的author属性的<p> ，所以这是唯一可见的数据。 没有其他的。

高分子元素结构 (Polymer element structure)

As you already know, Web Components let us create our own Custom Elements that encapsulate markup (HTML), styling (CSS) and behavior (JavaScript). Inside <dom-module> we have three sections:

如您所知，Web组件使我们可以创建自己的自定义元素，以封装标记（HTML），样式（CSS）和行为（JavaScript）。 在<dom-module>内部，我们分为三个部分：

• <template> to create markup that will be rendered inside <my-super-audio>;<template>创建将在<my-super-audio>内部呈现的标记；
• <style> to style this element;<style>为该元素设置样式；
• <script> to declare custom public and private properties, methods and other logic.<script>声明自定义的公共和私有属性，方法和其他逻辑。

Note: Starting with Polymer v1.1, it is recommended to place the <style> tag inside <template>.

注意：从Polymer v1.1开始，建议将<style>标记放在<template> 。

首先，布局。 (First things first: layout.)

Since we know how the My-Super-Audio element should look, let's create a markup for it. Our main horizontal rectangle will have three sections inside:

由于我们知道My-Super-Audio元素的外观，因此我们为其创建一个标记。 我们的主要水平矩形内部将包含三个部分：

<template><div id="wrapper"><div id="left"><!-- ... --></div><div><!-- ... --></div><div id="right"><!-- ... --></div></div>
</template>

To position all of them properly, let's add the <style> tag and some CSS rules using flex-box:

为了正确放置它们，让我们使用flex-box添加<style>标签和一些CSS规则：

<template><!-- styling --><style>:host {width: 100%;}#left,#right {height: 50px;width: 50px;position: relative;}#left {background-color: blueviolet;}/* Helpers */.layout-horizontal {display: flex;-ms-flex-direction: row;-webkit-flex-direction: row;flex-direction: row;}.flex {-ms-flex: 1;-webkit-flex: 1;flex: 1;}.self-start {-ms-align-self: flex-start;-webkit-align-self: flex-start;align-self: flex-start;}.self-end {-ms-align-self: flex-end;-webkit-align-self: flex-end;align-self: flex-end;}</style><!-- markup --><div id="wrapper" class="layout-horizontal"><div id="left" class="self-start"><!-- ... --></div><div class="flex"><!-- ... --></div><div id="right" class="self-end"><!-- ... --></div></div>
</template>

If you open the Demo page right now, you won't see much, so let's display a title, just like we displayed the author name above.

如果立即打开“演示”页面，您将不会看到太多内容，所以让我们显示一个标题，就像我们在上方显示作者姓名一样。

First, edit the property name from author to title in the Polymer function:

首先，在Polymer函数中将属性名称从作者更改为标题 ：

Polymer({is: 'my-super-audio',properties: {title: String}
});

Next, bind it inside the middle <div> with class flex:

接下来，使用flex类将其绑定在中间的<div> ：

<div id="left" class="self-start"><!-- ... --></div>
<div class="flex"><!-- Title --><div id="title" class="fit">{{ title }}</div>
</div>
<div id="right" class="self-end"><!-- ... --></div>

Add some styling inside <style>:

在<style>内添加一些样式：

#title {position: absolute; color: blueviolet; font-size: 15px; text-align: center; line-height: 50px; z-index: 2;
}#wrapper {position: relative; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); cursor: pointer;
}.fit { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0;
}

Lastly, let's edit our element on the Demo page, and pass title instead of author:

最后，让我们在“演示”页面上编辑元素，然后传递标题而不是author ：

<my-super-audio title="My Podcast #17"></my-super-audio>

Now, reload the Demo page and you will see Podcast #17 on a nice white material element. When the mouse hovers over the element, the cursor now becomes a pointer. It's time to play the audio!

现在，重新加载“演示”页面，您将在漂亮的白色材质元素上看到Podcast＃17 。 当鼠标悬停在元素上时，光标现在变为指针。 是时候播放音频了！

添加音频 (Add the audio)

To play a track, we will use the Web Audio API, which all browsers can work with. The most straightforward way to initiate this API is to declare an <audio> element.

要播放曲目，我们将使用所有浏览器都可以使用的Web Audio API。 初始化此API的最直接方法是声明<audio>元素。

First, let's add a new public property to pass the URL of the audio track.

首先，让我们添加一个新的公共属性以传递音轨的URL。

In my-super-audio.html:

在my-super-audio.html中 ：

<div class="flex"><!-- Title --><div id="title">{{ title }}</div><!-- Audio HTML5 element --><audio id="audio" src="{{ src }}"></audio>
</div>

Polymer({is: 'my-super-audio',properties: {title: String,src: String}
});

Demo page:

演示页面：

<my-super-audio title="Podcast #17" src="track.mp3"></my-super-audio>

Note: Make sure you specify the path to your favorite track, because you will have to listen to it a million times during the development and testing! :)

注意：请确保指定您喜欢的曲目的路径，因为在开发和测试过程中您将不得不听一百万遍！ :)

If you now inspect the Demo page with Developer Tools, you will see that the audio element is available inside <my-super-audio>, but how do you play it?

如果现在使用开发人员工具检查“演示”页面，您将看到<my-super-audio>中有音频元素，但是如何播放？

将click事件绑定到自定义方法 (Binding click event to custom method)

What we would like to achieve here is that when the user clicks anywhere on our element, the audio starts/pauses playing.

我们想要在这里实现的是，当用户单击元素上的任意位置时，音频开始/暂停播放。

To implement this behavior, we need to listen to the click event on the whole element and bind it to our custom method that will trigger <audio> to start (or pause) playing.

要实现此行为，我们需要侦听整个元素上的click事件，并将其绑定到我们的自定义方法，该方法将触发<audio>开始（或暂停）播放。

For events such as click, tap, mouseover, and so on, Polymer provides us with the convenient built-in listeners. To use it, simply add the on-click="playPause" attribute to #wrapper div:

对于click ， tap ， mouseover等事件，Polymer为我们提供了方便的内置侦听器。 要使用它，只需将on-click="playPause"属性添加到#wrapper div中：

<div id="wrapper" class="layout-horizontal" on-click="playPause">

Now, let's extend our Polymer element by adding a custom method to it:

现在，让我们通过添加自定义方法来扩展Polymer元素：

Polymer({ is: 'my-super-audio',properties: { title: String, src: String },playPause: function(e) { e.preventDefault(); var player = this; if ( player.$.audio.paused ) { player.$.audio.play(); } else { player.$.audio.pause(); } }
});

What we've done here:

我们在这里做了什么：

1. By referring to player.$.audio (or this.$.audio), we refer to an internal node with the id="audio". This is an automatic node finding tool from Polymer that allows us to access frequently-used nodes without the need to query for them manually. 通过引用player.$.audio （或this.$.audio ），我们引用一个内部节点，其id="audio" 。 这是Polymer的自动节点查找工具，它使我们能够访问常用节点，而无需手动查询它们。
2. Methods play() and pause() are native methods provided by the Audio Web API. 方法play（）和pause（）是Audio Web API提供的本机方法。

Now, reload the Demo page and click on the player to hear your track.

现在，重新加载“演示”页面，然后单击播放器以收听您的曲目。

使用外部自定义元素 (Using external Custom Elements)

So far, we've been writing our own code, but we could also integrate external Custom Elements the same way we do with native ones. Actually, we've just done it with the native <audio> element. Now let's add a couple of useful Polymer elements.

到目前为止，我们一直在编写自己的代码，但是我们也可以像使用本地元素一样集成外部自定义元素。 实际上，我们只是使用本机<audio>元素完成了此操作。 现在，让我们添加几个有用的Polymer元素。

What we need at this point is the progress bar to indicate the progress of the audio track. Let's use Paper-Progress element by Polymer for this.

此时，我们需要的是进度条以指示音轨的进度。 让我们为此使用Polymer的Paper-Progress元素。

First, let's install it with Bower as dependency:

首先，让我们以Bower作为依赖项进行安装：

bower install --save PolymerElements/paper-progress

Here, we use the --save flag, so Bower saves this element as a dependency in our bower.json. This is critically important, because users who want to use the <my-super-audio> element in their projects will need to install all the dependencies at the time of installation.

在这里，我们使用--save标志，因此Bower将此元素另存为bower.json的依赖bower.json 。 这一点非常重要，因为要在项目中使用<my-super-audio>元素的用户将需要在安装时安装所有依赖项。

To get access to the element after installation, we need to import it. Add the following lines at the very top of the my-super-audio.html file, right after the Polymer library import:

要在安装后访问元素，我们需要将其导入。 在Polymer库导入之后，在my-super-audio.html文件的最顶部添加以下行：

<link rel="import" href="../paper-progress/paper-progress.html">

Now let's add the progress bar to the middle section:

现在，将进度条添加到中间部分：

<div class="flex"><!-- Title --><div id="title">{{ title }}</div><!-- Audio HTML5 element --><audio id="audio" src="{{ src }}"></audio><!-- Paper progress bar --><paper-progress id="progress"></paper-progress>
</div>

To modify the default styling of the Paper-Progress element we use its custom external CSS properties, that have special prefix (--paper-progress-active-color). For each Polymer element its author can expose some styling options for easier customization. Add the following code to <style>:

要修改Paper-Progress元素的默认样式，我们使用其自定义的外部CSS属性，这些属性具有特殊的前缀（ --paper-progress-active-color ）。 对于每个Polymer元素，其作者可以公开一些样式选项，以便于自定义。 将以下代码添加到<style> ：

paper-progress {position: relative;width: 100%;--paper-progress-active-color: blueviolet;--paper-progress-height: 50px;--paper-progress-container-color: rgba(255, 255, 255, .75);
}

In JS, we need to add two event listeners to the <audio> element.

在JS中，我们需要向<audio>元素添加两个事件侦听器。

• The first one will trigger when <audio> metadata is loaded by the browser. At this point we know the duration of the track, therefore we can set the max property of the progress bar. 第一个将在浏览器加载<audio>元数据时触发。 至此，我们知道了轨道的持续时间，因此我们可以设置进度条的max属性。
• The second listener will fire when <audio> starts playing. At this point, we start the progress timer that will update the progress bar state every 120 milliseconds. 当<audio>开始播放时，第二个监听器将触发。 此时，我们启动进度计时器，它将每120毫秒更新进度条状态。

// Register event listenerslisteners: { 'audio.loadedmetadata': '_onCanPlay', 'audio.playing':        '_startProgressTimer'
},// When metadata is loaded and player can start playing_onCanPlay: function() { var player = this; player.$.progress.max = player.$.audio.duration * 1000;
},// Start the progress timer_startProgressTimer: function() { var player = this; player.timer = {}; if (player.timer.sliderUpdateInterval) { clearInterval(player.timer.sliderUpdateInterval); } player.timer.sliderUpdateInterval = setInterval( function(){ if ( player.$.audio.paused ) { clearInterval(player.timer.sliderUpdateInterval); } else { player.$.progress.value = player.$.audio.currentTime * 1000; player.currentTime = player.$.audio.currentTime; } }, 120);
}

Check out the Demo page! Looks good, doesn't it? :)

查看演示页面！ 看起来不错，不是吗？ :)

计算绑定 (Computed bindings)

Since we now have access to track duration data, let's display it in the #right section of our player. Lets create the duration property that will be a Number:

由于我们现在可以访问跟踪持续时间数据，因此将其显示在播放器的#right部分中。 让我们创建为Number的duration属性：

properties: {title: String,src: String,isPlaying: {type: Boolean,value: false},duration: {type: Number,value: 0}
},

Add the following markup inside <template>:

在<template>内添加以下标记：

<div id="right" class="self-end"><!-- Duration --><div id="duration" class="fit"><span class="fit">{{ duration }}</span></div>
</div>

And styling inside <style>:

并在<style> ：

#duration {text-align: center;line-height: 50px;font-size: 11px;color: blueviolet;
}

Now we need to update the duration property when the <audio> element metadata is loaded in the browser. For this lets extend out _onCanPlay method:

现在，当<audio>元素元数据加载到浏览器中时，我们需要更新duration属性。 为此，我们扩展_onCanPlay方法：

_onCanPlay: function() {var player = this;player.$.progress.max = player.$.audio.duration * 1000;player.duration = player.$.audio.duration;
},

Ok, check out the Demo page to verify it. We can see the duration now, but it's a long number.

好的，请查看“演示”页面以进行验证。 现在我们可以看到持续时间 ，但是它是一个很长的数字。

The problem is that <audio> element provides its duration in seconds, which is not informative for our users. So how can we transform seconds to a good looking m:ss format? Computer bindings to the rescue!

问题在于<audio>元素以秒为单位提供其持续时间，这对于我们的用户而言并不能提供任何信息。 那么如何将秒转换为美观的m:ss格式？ 电脑捆绑营救！

A computed binding is similar to a computed property. Let's add a private method _convertSecToMin:

计算的绑定类似于计算的属性。 让我们添加一个私有方法_convertSecToMin ：

// to convert seconds to 'm:ss' format
_convertSecToMin: function(seconds){if (seconds === 0) {return '';}var minutes = Math.floor(seconds / 60);var secondsToCalc = Math.floor(seconds % 60) + '';return minutes + ':' + (secondsToCalc.length < 2 ? '0' + secondsToCalc : secondsToCalc);
}

And modify our binding in the markup:

并在标记中修改我们的绑定：

<!-- Duration -->
<div id="duration" class="fit"><span class="fit">{{ _convertSecToMin(duration) }}</span>
</div>

Awesome! It looks way better now.

太棒了！ 现在看起来好多了。

数据绑定助手 (Data binding helpers)

The final thing we would want to implement in our player is the icons in the #left that will indicate whether the player can be played or paused, depending on its current state.

我们要在播放器中实现的最后一件事是#left中的图标，这些图标将根据其当前状态指示播放器还是播放器或暂停播放器。

First, let's save Iron-Icons as dependencies to our player:

首先，让我们将Iron-Icons保存为播放器的依赖项：

bower install --save PolymerElements/iron-icon

bower install --save PolymerElements/iron-icons

In my-super-audio.html, import these two libraries right after the Paper-Progress:

在my-super-audio.html中 ，在Paper-Progress之后立即导入以下两个库：

<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-icons/av-icons.html">

Add the following markup and styling:

添加以下标记和样式：

<div id="left" class="self-start"><!-- Icons --><iron-icon id="play" class="fit" icon="av:play-circle-outline" hidden$="{{ isPlaying }}"></iron-icon><iron-icon id="pause" class="fit" icon="av:pause-circle-outline" hidden$="{{ !isPlaying }}"></iron-icon>
</div>

#play,
#pause {color: #fff;
}

In the Polymer function, add a new property called isPlaying to record the state of the player, and extend the playPause method to toggle this property when the user clicks on the element:

在Polymer函数中，添加一个名为isPlaying的新属性以记录播放器的状态，并扩展playPause方法以在用户单击该元素时切换此属性：

Polymer({ is: 'my-super-audio',properties: { title: String, src: String, isPlaying: { type: Boolean, value: false } },playPause: function(e){ e.preventDefault(); var player = this; if ( player.$.audio.paused ) { player.$.audio.play(); player.isPlaying = true; } else { player.$.audio.pause(); player.isPlaying = false; } }
});

Note that this time we declared a new property isPlaying as an object, with type Boolean and default value of false.

请注意，这次我们声明了一个新属性isPlaying作为一个对象，其类型为Boolean且默认值为false 。

恭喜！ 您已经创建了第一个自定义元素！ (Congrats! You've created your first Custom Element!)

This tutorial is created based on the open source Paper-Audio-Player element. Check it out to see how different Polymer features can play together.

本教程是基于开源的Paper-Audio-Player元素创建的。 进行检查，以了解不同的Polymer功能如何一起发挥。

链接 (Links)

• Custom Elements standard 自定义元素标准
• Web Components Web组件
• Polymer project 聚合物项目
• X-Tag X标记
• Web Audio API 网络音频API
• paper-audio-player纸质音频播放器

翻译自: https://scotch.io/tutorials/create-a-custom-audio-player-element-using-polymer

polymer ajax