audio.html 38.7 KB
Newer Older
J
JiM-W 已提交
1 2 3 4 5 6 7 8 9 10
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>video | Chameleon 变色龙</title>
    <meta name="description" content="一套代码运行多端,一端所见即多端所见">
    <meta name="generator" content="VuePress 1.4.0">
    <link rel="icon" href="/brand/logo.png">
    
J
JiM-W 已提交
11 12
    <link rel="preload" href="/assets/css/0.styles.54ae56e3.css" as="style"><link rel="preload" href="/assets/js/app.bcfec7ef.js" as="script"><link rel="preload" href="/assets/js/60.7feedc98.js" as="script"><link rel="preload" href="/assets/js/1.b97c77c7.js" as="script"><link rel="preload" href="/assets/js/62.3a2ee585.js" as="script"><link rel="preload" href="/assets/js/2.d28a060e.js" as="script"><link rel="prefetch" href="/assets/js/10.051c47d1.js"><link rel="prefetch" href="/assets/js/11.2aa2c0dc.js"><link rel="prefetch" href="/assets/js/12.c44665a3.js"><link rel="prefetch" href="/assets/js/13.70dfc111.js"><link rel="prefetch" href="/assets/js/14.6a71260e.js"><link rel="prefetch" href="/assets/js/15.705c4158.js"><link rel="prefetch" href="/assets/js/16.71245a0d.js"><link rel="prefetch" href="/assets/js/17.1a08cd91.js"><link rel="prefetch" href="/assets/js/18.e24096cc.js"><link rel="prefetch" href="/assets/js/19.8a8e69c2.js"><link rel="prefetch" href="/assets/js/20.cfee8d18.js"><link rel="prefetch" href="/assets/js/21.659a4f9f.js"><link rel="prefetch" href="/assets/js/22.ca78fab7.js"><link rel="prefetch" href="/assets/js/23.28baa1bb.js"><link rel="prefetch" href="/assets/js/24.c0a085ec.js"><link rel="prefetch" href="/assets/js/25.2f0d69d1.js"><link rel="prefetch" href="/assets/js/26.205c20fa.js"><link rel="prefetch" href="/assets/js/27.5314d987.js"><link rel="prefetch" href="/assets/js/28.0087c8dc.js"><link rel="prefetch" href="/assets/js/29.70de71c9.js"><link rel="prefetch" href="/assets/js/30.9c7a51df.js"><link rel="prefetch" href="/assets/js/31.a0c45279.js"><link rel="prefetch" href="/assets/js/32.b68995bf.js"><link rel="prefetch" href="/assets/js/33.5ebcc272.js"><link rel="prefetch" href="/assets/js/34.76b8c9f0.js"><link rel="prefetch" href="/assets/js/35.6d4c26dc.js"><link rel="prefetch" href="/assets/js/36.70afd6a5.js"><link rel="prefetch" href="/assets/js/37.d40c4e19.js"><link rel="prefetch" href="/assets/js/38.3f0d946f.js"><link rel="prefetch" href="/assets/js/39.def09b51.js"><link rel="prefetch" href="/assets/js/40.7f6b7784.js"><link rel="prefetch" href="/assets/js/41.a0de49d9.js"><link rel="prefetch" href="/assets/js/42.8c3379e9.js"><link rel="prefetch" href="/assets/js/43.a81a4bb3.js"><link rel="prefetch" href="/assets/js/44.a26444fd.js"><link rel="prefetch" href="/assets/js/45.1393dfc0.js"><link rel="prefetch" href="/assets/js/46.e2ebc893.js"><link rel="prefetch" href="/assets/js/47.4da9ab59.js"><link rel="prefetch" href="/assets/js/48.2fdfc375.js"><link rel="prefetch" href="/assets/js/49.f9d1a56b.js"><link rel="prefetch" href="/assets/js/5.1068e2bd.js"><link rel="prefetch" href="/assets/js/50.1ceb9d3f.js"><link rel="prefetch" href="/assets/js/51.a255833a.js"><link rel="prefetch" href="/assets/js/52.98e72823.js"><link rel="prefetch" href="/assets/js/53.03ba08cb.js"><link rel="prefetch" href="/assets/js/54.9d82aee4.js"><link rel="prefetch" href="/assets/js/55.4956ad06.js"><link rel="prefetch" href="/assets/js/56.5f511c62.js"><link rel="prefetch" href="/assets/js/57.9806475a.js"><link rel="prefetch" href="/assets/js/58.ebf8ba39.js"><link rel="prefetch" href="/assets/js/59.ebca6969.js"><link rel="prefetch" href="/assets/js/6.25d813cf.js"><link rel="prefetch" href="/assets/js/61.45ebc898.js"><link rel="prefetch" href="/assets/js/63.310dd45c.js"><link rel="prefetch" href="/assets/js/64.5cc72cbe.js"><link rel="prefetch" href="/assets/js/65.fdc686c2.js"><link rel="prefetch" href="/assets/js/66.7730cd91.js"><link rel="prefetch" href="/assets/js/67.5c4cc3ba.js"><link rel="prefetch" href="/assets/js/68.35e45285.js"><link rel="prefetch" href="/assets/js/69.f52c6d25.js"><link rel="prefetch" href="/assets/js/7.9a617213.js"><link rel="prefetch" href="/assets/js/70.fb558cc9.js"><link rel="prefetch" href="/assets/js/71.bb886562.js"><link rel="prefetch" href="/assets/js/72.3c87e0a1.js"><link rel="prefetch" href="/assets/js/73.4cd26a47.js"><link rel="prefetch" href="/assets/js/74.ae876b8f.js"><link rel="prefetch" href="/assets/js/75.80730e6c.js"><link rel="prefetch" href="/assets/js/76.3eca2e20.js"><link rel="prefetch" href="/assets/js/77.5f4c3e9b.js"><link rel="prefetch" href="/assets/js/78.991d2007.js"><link rel="prefetch" href="/assets/js/79.2798e216.js"><link rel="prefetch" href="/assets/js/8.b158ec59.js"><link rel="prefetch" href="/assets/js/80.c095fb3b.js"><link rel="prefetch" href="/assets/js/81.e408e60b.js"><link rel="prefetch" href="/assets/js/82.cc25d73a.js"><link rel="prefetch" href="/assets/js/83.356558e4.js"><link rel="prefetch" href="/assets/js/84.8866a75b.js"><link rel="prefetch" href="/assets/js/85.87eac94e.js"><link rel="prefetch" href="/assets/js/86.76900837.js"><link rel="prefetch" href="/assets/js/87.103b6b87.js"><link rel="prefetch" href="/assets/js/88.94e419d1.js"><link rel="prefetch" href="/assets/js/89.8be3decb.js"><link rel="prefetch" href="/assets/js/9.dc5cb60e.js"><link rel="prefetch" href="/assets/js/90.48dae3fa.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.1b18fdaf.js">
    <link rel="stylesheet" href="/assets/css/0.styles.54ae56e3.css">
J
JiM-W 已提交
13 14
  </head>
  <body>
J
JiM-W 已提交
15
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/brand/logo.png" alt="Chameleon 变色龙" class="logo"> <span class="site-name can-hide">Chameleon 变色龙</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/" class="nav-link">
J
JiM-W 已提交
16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132
  文档
</a></div><div class="nav-item"><a href="/components/" class="nav-link router-link-active">
  组件
</a></div><div class="nav-item"><a href="/api/" class="nav-link">
  API
</a></div><div class="nav-item"><a href="/tutorial/" class="nav-link">
  教程
</a></div><div class="nav-item"><a href="/faq/" class="nav-link">
  FAQ
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/" class="nav-link">
  文档
</a></div><div class="nav-item"><a href="/components/" class="nav-link router-link-active">
  组件
</a></div><div class="nav-item"><a href="/api/" class="nav-link">
  API
</a></div><div class="nav-item"><a href="/tutorial/" class="nav-link">
  教程
</a></div><div class="nav-item"><a href="/faq/" class="nav-link">
  FAQ
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><a href="/components/base" class="sidebar-heading clickable open"><span>内置组件</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/components/view.html" class="sidebar-link">view</a></li><li><a href="/components/cover-view.html" class="sidebar-link">cover-view</a></li><li><a href="/components/text.html" class="sidebar-link">text</a></li><li><a href="/components/richtext.html" class="sidebar-link">richtext</a></li><li><a href="/components/page.html" class="sidebar-link">page</a></li><li><a href="/components/block.html" class="sidebar-link">block</a></li><li><a href="/components/cell.html" class="sidebar-link">cell</a></li></ul></section></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>布局</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/components/scroller.html" class="sidebar-link">scroller</a></li><li><a href="/components/list.html" class="sidebar-link">list</a></li><li><a href="/components/container.html" class="sidebar-link">container</a></li><li><a href="/components/row.html" class="sidebar-link">row</a></li><li><a href="/components/col.html" class="sidebar-link">col</a></li><li><a href="/components/carousel.html" class="sidebar-link">carousel</a></li><li><a href="/components/carousel-item.html" class="sidebar-link">carousel-item</a></li><li><a href="/components/refresh-view.html" class="sidebar-link">refresh-view</a></li></ul></section></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>表单</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/components/button.html" class="sidebar-link">button</a></li><li><a href="/components/input.html" class="sidebar-link">input</a></li><li><a href="/components/textarea.html" class="sidebar-link">textarea</a></li><li><a href="/components/switch.html" class="sidebar-link">switch</a></li><li><a href="/components/radio.html" class="sidebar-link">radio</a></li><li><a href="/components/checkbox.html" class="sidebar-link">checkbox</a></li></ul></section></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>媒体</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/components/image.html" class="sidebar-link">image</a></li><li><a href="/components/video.html" class="sidebar-link">video</a></li><li><a href="/components/audio.html" class="active sidebar-link">video</a></li></ul></section></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/components/expand" class="sidebar-heading clickable"><span>扩展组件</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/components/c-toast.html" class="sidebar-link">c-toast</a></li><li><a href="/components/c-loading.html" class="sidebar-link">c-loading</a></li><li><a href="/components/c-dialog.html" class="sidebar-link">c-dialog</a></li><li><a href="/components/c-popup.html" class="sidebar-link">c-popup</a></li><li><a href="/components/c-tip.html" class="sidebar-link">c-tip</a></li><li><a href="/components/c-actionsheet.html" class="sidebar-link">c-actionsheet</a></li><li><a href="/components/c-tab.html" class="sidebar-link">c-tab</a></li><li><a href="/components/c-picker.html" class="sidebar-link">c-picker</a></li><li><a href="/components/c-picker-panel.html" class="sidebar-link">c-picker-panel</a></li><li><a href="/components/c-picker-item.html" class="sidebar-link">c-picker-item</a></li><li><a href="/components/c-checkbox-group.html" class="sidebar-link">c-checkbox-group</a></li><li><a href="/components/c-radio-group.html" class="sidebar-link">c-radio-group</a></li><li><a href="/components/c-tabbar.html" class="sidebar-link">c-tabbar</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="video"><a href="#video" class="header-anchor">#</a> video</h1> <hr> <p>音频播放器</p> <p>升级<code>chameleon-ui-builtin chameleon-api chameleon-bridge</code></p> <div class="language- extra-class"><pre class="language-text"><code>npm i chameleon-ui-builtin@0.2.12 -S
npm i chameleon-api@0.5.0 -S
npm i chameleon-bridge@0.1.11 -S
</code></pre></div><h3 id="属性"><a href="#属性" class="header-anchor">#</a> 属性</h3> <table><thead><tr><th>属性名</th> <th>类型</th> <th>必填</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>src</td> <td>String</td> <td></td> <td>&quot;&quot;</td> <td>要播放的音频资源地址</td></tr> <tr><td>loop</td> <td>Boolean</td> <td></td> <td>false</td> <td>是否循环播放</td></tr> <tr><td>controls</td> <td>Boolean</td> <td></td> <td>false</td> <td>是否显示音频控件</td></tr> <tr><td>poster</td> <td>String</td> <td></td> <td>&quot;&quot;</td> <td>默认控件上的音频封面的图片资源地址</td></tr> <tr><td>name</td> <td>String</td> <td></td> <td>未知音频</td> <td>默认控件上的音频名字</td></tr> <tr><td>author</td> <td>String</td> <td></td> <td>未知作者</td> <td>默认控件上的作者名字</td></tr> <tr><td>autoplay</td> <td>Boolean</td> <td></td> <td>false</td> <td>是否自动播放音频</td></tr> <tr><td>c-bind:play</td> <td>EventHandle</td> <td></td> <td></td> <td>当开始/继续播放时触发 play 事件</td></tr> <tr><td>c-bind:pause</td> <td>EventHandle</td> <td></td> <td></td> <td>当暂停播放时触发 pause 事件</td></tr> <tr><td>c-bind:timeupdate</td> <td>EventHandle</td> <td></td> <td></td> <td>当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration}</td></tr> <tr><td>c-bind:end</td> <td>EventHadnle</td> <td></td> <td></td> <td>当播放到末尾时触发 ended 事件</td></tr> <tr><td>c-bind:error</td> <td>EventHadnle</td> <td></td> <td></td> <td>当发生错误时触发 error 事件,detail = {errMsg:errorCode}</td></tr></tbody></table> <p>errorCode 取值如下:</p> <table><thead><tr><th style="text-align:left;"></th> <th style="text-align:left;">说明</th> <th style="text-align:left;">最低版本</th></tr></thead> <tbody><tr><td style="text-align:left;">10001</td> <td style="text-align:left;">系统错误</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">10002</td> <td style="text-align:left;">网络错误</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">10003</td> <td style="text-align:left;">文件错误</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">10004</td> <td style="text-align:left;">格式错误</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">-1</td> <td style="text-align:left;">未知错误</td> <td style="text-align:left;"></td></tr></tbody></table> <h3 id="示例"><a href="#示例" class="header-anchor">#</a> 示例</h3> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>page</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>audio<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>audio<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>audio</span>
        <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>{{src}}<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">controls</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>{{true}}<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">autoplay</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>{{true}}<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">loop</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>{{true}}<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">poster</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>{{poster}}<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name"><span class="token namespace">c-bind:</span>pause</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>handlePause<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name"><span class="token namespace">c-bind:</span>play</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>handlePlay<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name"><span class="token namespace">c-bind:</span>timeupdate</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>handleTimeupdate<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name"><span class="token namespace">c-bind:</span>ended</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>handleEnded<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name"><span class="token namespace">c-bind:</span>error</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>handleError<span class="token punctuation">&quot;</span></span>
      <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>audio</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>page</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> cml <span class="token keyword">from</span> <span class="token string">'chameleon-api'</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">Audio</span> <span class="token punctuation">{</span>
  data <span class="token operator">=</span> <span class="token punctuation">{</span>
    poster<span class="token operator">:</span>
      <span class="token string">'http://p1.music.126.net/bYTctrjUegSyzDPteIeNOw==/74766790705099.jpg?imageView&amp;thumbnail=360y360&amp;quality=75&amp;tostatic=0'</span><span class="token punctuation">,</span>
    src<span class="token operator">:</span>
      <span class="token string">'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&amp;bizid=1023&amp;hy=SH&amp;fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  computed <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
  watch <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
  methods <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token function">handlePause</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'emit-pause'</span><span class="token punctuation">,</span> args<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>audioText <span class="token operator">=</span> <span class="token string">'pause'</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">handlePlay</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'emit-play'</span><span class="token punctuation">,</span> args<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>audioText <span class="token operator">=</span> <span class="token string">'play'</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">handleTimeupdate</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>audioText <span class="token operator">=</span> <span class="token string">'timeUpdate'</span><span class="token punctuation">;</span>
      <span class="token comment">// console.log('timeupdate',args)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">handleEnded</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>audioText <span class="token operator">=</span> <span class="token string">'ended'</span><span class="token punctuation">;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'emit-ended'</span><span class="token punctuation">,</span> args<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">handleError</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'emit-error'</span><span class="token punctuation">,</span> args<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">Audio</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.audio</span> <span class="token punctuation">{</span>
  <span class="token property">padding-top</span><span class="token punctuation">:</span> 200cpx<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">cml-type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token punctuation">{</span>
    <span class="token string">&quot;base&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token string">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token string">&quot;navigationBarTitleText&quot;</span><span class="token operator">:</span> <span class="token string">&quot;button&quot;</span><span class="token punctuation">,</span>
        <span class="token string">&quot;backgroundTextStyle&quot;</span><span class="token operator">:</span> <span class="token string">&quot;dark&quot;</span><span class="token punctuation">,</span>
        <span class="token string">&quot;backgroundColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#E2E2E2&quot;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">

      <a href="/components/video.html" class="prev">
        video
      </a></span> <span class="next"><a href="/components/c-toast.html">
        c-toast
      </a>

    </span></p></div> <footer class="footer" data-v-aa5c954a><div class="content" data-v-aa5c954a><div class="left" data-v-aa5c954a><a href="/" class="brand" data-v-aa5c954a><img src="data:image/png;base64,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" alt="logo" data-v-aa5c954a> <span data-v-aa5c954a>Chameleon</span></a> <div class="info" data-v-aa5c954a>Copyright © 2020 DiDi Chuxing Inc.</div></div> <div class="right" data-v-aa5c954a><div class="col" data-v-aa5c954a><h4 data-v-aa5c954a>资源</h4> <a href="/components/expand.html" data-v-aa5c954a>Chameleon UI</a><a href="https://github.com/beatles-chameleon/cml-demo" target="_blank" rel="noopener" data-v-aa5c954a>
              Chameleon Demo
            </a><a href="https://github.com/chameleon-team/awesome-cml" target="_blank" rel="noopener" data-v-aa5c954a>
              Awesome Chameleon
            </a><a href="https://github.com/didi/chameleon/releases" target="_blank" rel="noopener" data-v-aa5c954a>
              更新记录
            </a></div><div class="col" data-v-aa5c954a><h4 data-v-aa5c954a>社区</h4> <a href="https://github.com/didi/chameleon/issues" target="_blank" rel="noopener" data-v-aa5c954a>
              GitHub
            </a><a data-v-aa5c954a><span data-v-aa5c954a>微信交流群</span> <img src="/assets/img/qr_weixin.59cd000a.png" alt="image" data-v-aa5c954a></a><a data-v-aa5c954a><span data-v-aa5c954a>QQ 交流群</span> <img src="/assets/img/qr_qq.115678d7.jpg" alt="image" data-v-aa5c954a></a><a data-v-aa5c954a><span data-v-aa5c954a>顺风公鹿</span> <img src="/assets/img/qr_deer.e2ddb653.png" alt="image" data-v-aa5c954a></a></div><div class="col" data-v-aa5c954a><h4 data-v-aa5c954a>关于</h4> <a href="https://github.com/didi/chameleon/wiki/Chameleon%E5%9B%A2%E9%98%9F" target="_blank" rel="noopener" data-v-aa5c954a>
              Chameleon 团队
            </a><a href="https://github.com/didi/chameleon/wiki/%E5%8A%A0%E5%85%A5%E6%88%91%E4%BB%AC" target="_blank" rel="noopener" data-v-aa5c954a>
              加入我们
            </a><a href="mailto:CML@didichuxing.com" target="_blank" rel="noopener" data-v-aa5c954a>
              联系我们
            </a><a href="https://github.com/didi/chameleon/wiki/Contributors" target="_blank" rel="noopener" data-v-aa5c954a>
              贡献者
            </a></div></div></div></footer></main></div><div class="global-ui"><!----></div></div>
J
JiM-W 已提交
133
    <script src="/assets/js/app.bcfec7ef.js" defer></script><script src="/assets/js/60.7feedc98.js" defer></script><script src="/assets/js/1.b97c77c7.js" defer></script><script src="/assets/js/62.3a2ee585.js" defer></script><script src="/assets/js/2.d28a060e.js" defer></script>
J
JiM-W 已提交
134 135
  </body>
</html>