{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/plus/audioPlayer","result":{"data":{"current":{"frontmatter":{"title":"AudioPlayer 音频播放器","order":98,"brief":"用于播放音频","icon":"doc-audioplayer"},"fields":{"type":"plus"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#隐藏工具栏","title":"隐藏工具栏"},{"url":"#主题","title":"主题"}]},{"url":"#api-参考","title":"API 参考","items":[{"url":"#audioplayer","title":"AudioPlayer"},{"url":"#audioinfo","title":"AudioInfo"}]}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"localeCode\": \"zh-CN\",\n \"order\": 98,\n \"category\": \"Plus\",\n \"title\": \"AudioPlayer 音频播放器\",\n \"icon\": \"doc-audioplayer\",\n \"width\": \"60%\",\n \"brief\": \"用于播放音频\"\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"import\",\n \"import\": true\n }, \"import { AudioPlayer } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u57FA\\u672C\\u4F7F\\u7528\\uFF0C\\u901A\\u8FC7\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"audioUrl\"), \"\\u4F20\\u5165\\u97F3\\u9891\\u5730\\u5740\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"audioUrl \\u53EF\\u4EE5\\u4F20\\u5165\\u5B57\\u7B26\\u4E32\\uFF0C\\u5B57\\u7B26\\u4E32\\u6570\\u7EC4\\uFF0C\\u5BF9\\u8C61\\uFF0C\\u5BF9\\u8C61\\u6570\\u7EC4\\uFF0C \\u5177\\u4F53\\u53C2\\u6570\\u53C2\\u8003 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"#AudioPlayer\"\n }, \"AudioPlayer\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"noInline\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { AudioPlayer } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n const audioUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio2.mp3';\\n const audioUrlArr = [\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio1.mp3',\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio2.mp3',\\n ];\\n const audioUrlObj = {\\n src: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio1.mp3',\\n title: '\\u97F3\\u9891\\u6807\\u9898',\\n cover: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg',\\n };\\n const audioUrlArrObj = [\\n {\\n src: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio1.mp3',\\n title: '\\u97F3\\u9891\\u6807\\u98981',\\n cover: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg',\\n },\\n {\\n src: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio2.mp3',\\n title: '\\u97F3\\u9891\\u6807\\u98982',\\n cover: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg',\\n },\\n ];\\n \\n return (\\n
\\n
\\n \\n
\\n
\\n \\n
\\n
\\n \\n
\\n
\\n \\n
\\n
\\n );\\n}\\n\\nrender(Demo);\\n\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u9690\\u85CF\\u5DE5\\u5177\\u680F\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"showToolbar \\u8BBE\\u7F6E\\u4E3Afalse\\uFF0C\\u5219\\u9690\\u85CF\\u5DE5\\u5177\\u680F\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"noInline\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { AudioPlayer } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n const audioUrlObj = {\\n src: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio1.mp3',\\n title: '\\u97F3\\u9891\\u6807\\u9898'\\n };\\n \\n return (\\n
\\n \\n
\\n );\\n}\\n\\nrender(Demo);\\n\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u4E3B\\u9898\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"theme\"), \" \\u8BBE\\u7F6E\\u97F3\\u9891\\u64AD\\u653E\\u5668\\u4E3B\\u9898\\uFF0C\\u652F\\u6301 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"light\"), \" \\u548C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"dark\"), \"\\uFF0C\\u9ED8\\u8BA4 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"dark\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"noInline\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { AudioPlayer } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n const audioUrlArrObj = [\\n {\\n src: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio1.mp3',\\n title: '\\u97F3\\u9891\\u6807\\u98981',\\n cover: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg',\\n },\\n {\\n src: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio2.mp3',\\n title: '\\u97F3\\u9891\\u6807\\u98982',\\n cover: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg',\\n },\\n ];\\n \\n return (\\n
\\n \\n
\\n );\\n}\\n\\nrender(Demo);\\n\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"API \\u53C2\\u8003\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"AudioPlayer\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"audioUrl\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u97F3\\u9891\\u5730\\u5740\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string \\uFF5C string[] \\uFF5C AudioInfo \\uFF5C AudioInfo[]\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"autoPlay\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u81EA\\u52A8\\u64AD\\u653E\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"theme\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u4E3B\\u9898,\\u53EF\\u9009\\u503C\\uFF1A\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"dark\"), \" \\u548C \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"light\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\\"dark\\\"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"showToolbar\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u662F\\u5426\\u663E\\u793A\\u5DE5\\u5177\\u680F\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"skipDuration\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8DF3\\u8F6C\\u65F6\\u95F4\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"10\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"className\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7C7B\\u540D\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"object\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")))), mdx(\"h3\", {\n parentName: \"section\"\n }, \"AudioInfo\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"src\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u97F3\\u9891\\u5730\\u5740\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"title\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u97F3\\u9891\\u6807\\u9898\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"cover\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5C01\\u9762\\u56FE\\u7247\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"))))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/plus/audioPlayer","next":{"fields":{"slug":"en-US/plus/videoPlayer"},"id":"f3c4531a-81ef-561f-84a2-ee82aea2880e","frontmatter":{"title":"VideoPlayer","localeCode":"en-US","icon":"doc-videoplayer","showNew":null}},"previous":{"fields":{"slug":"en-US/plus/audioPlayer"},"id":"fbea2623-253c-53dd-abda-de5dcf959912","frontmatter":{"title":"AudioPlayer","localeCode":"en-US","icon":"doc-audioplayer","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}