{"id":965,"date":"2024-05-08T15:39:13","date_gmt":"2024-05-08T07:39:13","guid":{"rendered":"https:\/\/gjweb.top\/?p=965"},"modified":"2024-05-08T16:05:54","modified_gmt":"2024-05-08T08:05:54","slug":"%e9%9f%b3%e9%a2%91%e5%8f%af%e8%a7%86%e5%8c%96-audio-visualization-pro","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=965","title":{"rendered":"\u97f3\u9891\u53ef\u89c6\u5316 audio-visualization-pro"},"content":{"rendered":"\n

<\/p>\n\n\n\n

\u7b80\u4ecb<\/strong><\/h2>\n\n\n\n

`audio-visualization-pro` \u662f\u9488\u5bf9 `audio-visualization`\u5f00\u6e90\u7684\u5f3a\u5316\u7248\u672c,\u901a\u8fc7 `WEB-AUDIO-API` \u5b9e\u73b0\u7684\u5b9e\u73b0\u7684\u97f3\u4e50\u53ef\u89c6\u5316\u7684\u5e93\uff0c\u901a\u8fc7\u672c\u5e93\u4f60\u53ef\u4ee5\u83b7\u53d6\u5230`\u5f53\u524d\u97f3\u9891`\u7684\u97f3\u9891\u9891\u8c31\uff0c\u5e76\u5728\u539f\u4f5c\u8005\u57fa\u7840\u4e0a\u5f3a\u5316\u4e86\u521b\u5efa\u3001\u6682\u505c\u3001\u9500\u6bc1\u7b49\u5b9e\u4f8b\u65b9\u6cd5\u5e76\u63d0\u4f9b\u76f8\u5e94\u7684 API \u65b9\u6cd5<\/p>\n\n\n\n

\u94fe\u63a5<\/strong><\/h2>\n\n\n\n

github<\/a> npm<\/a><\/p>\n\n\n\n

\u65b9\u6cd5<\/h2>\n\n\n\n
\u65b9\u6cd5<\/th>\u6ce8\u91ca<\/th><\/tr><\/thead>
AudioVisualizationPro(url:string,loop:booler)<\/td>\u5b9e\u4f8b\u5316API<\/td><\/tr>
setFftSzie(int)<\/td>\u97f3\u9891\u632f\u5e45\u5e38\u752832\u300164\u3001128\u3001512\uff08\u7b49\u500d\u6570\u5b9a\u4e49\uff09<\/td><\/tr>
play(({frequency, currentTime, audiostate})=>{})<\/td>\u64ad\u653e\uff0c\u5305\u542b\u56de\u5230\u51fd\u6570 frequency \u97f3\u9891\u632f\u5e45\u6570\u7ec4 Array[number]\u3001currentTime\u64ad\u653e\u7684\u8fdb\u5ea6\u3001audiostate\u64ad\u653e\u72b6\u6001 1\u64ad\u653e\u30010\u505c\u6b62<\/td><\/tr>
suspend()<\/td>\u6682\u505c\u64ad\u653e<\/td><\/tr>
destroy()<\/td>\u9500\u6bc1\u5f53\u524d\u5b9e\u4f8b\uff0c\u53ef\u91cd\u65b0\u521b\u5efa\u65b0\u7684\u97f3\u4e50\u53ef\u89c6\u5316\u5b9e\u4f8b<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

\u6548\u679c<\/h2>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n

\u793a\u4f8b<\/h2>\n\n\n\n

vue2.0<\/h3>\n\n\n\n
<template>\n  <div id=\"app\">\n    <div class=\"titleContainer\">\u97f3\u9891\u53ef\u89c6\u5316<\/div>\n    <div class=\"echartsContainer\" id=\"echartsContainer\"><\/div>\n    <!-- \u63a7\u5236\u5668 -->\n    <div class=\"controllerContainer\">\n      <div @click=\"audioPlay(1)\">\u64ad\u653e<\/div>\n      <div @click=\"audioPlay(0)\">\u6682\u505c<\/div>\n      <div @click=\"destruction()\">\u9500\u6bc1\u5b9e\u4f8b\u91cd\u65b0\u521b\u5efa<\/div>\n    <\/div>\n  <\/div>\n<\/template>\n\n<script>\nimport \"audio-visualization-pro\"\nexport default {\n  name: 'App',\n  components: {\n\n  },\n  data(){\n    return {\n      AVP:null\n    }\n  },\n  mounted(){\n    this.createVisualization();\n  },\n  methods:{\n    \/**\u521d\u59cb\u5316\u5b9e\u4f8b *\/\n    createVisualization(){\n      this.AVP = new window.AudioVisualizationPro({\n        url:require(\".\/assets\/audio.mp3\"),\n        loop:false\n      })\n    },\n    \/**\u64ad\u653e&\u6682\u505c *\/\n    audioPlay(type){\n      if(type){\n        this.AVP.play(({frequency})=>{\n          this.createEcharts([...Array.from(frequency).reverse(), ...frequency])\n        })\n      }else{\n        this.AVP.suspend()\n      }\n    },\n    \/*\u9500\u6bc1\u5b9e\u4f8b*\/\n    destruction(){\n      if(this.AVP){\n        this.AVP.destroy();\n        this.AVP = null;\n        this.createVisualization()\n      }\n    },\n    \/*\u56fe\u8868*\/\n    createEcharts(data){}\n  }\n}\n<\/script><\/code><\/pre>\n\n\n\n
vue3.0<\/h3>\n\n\n\n
<template>\n  <div id=\"app\">\n    <div class=\"titleContainer\">\u97f3\u9891\u53ef\u89c6\u5316<\/div>\n    <div class=\"echartsContainer\" id=\"echartsContainer\"><\/div>\n    <!-- \u63a7\u5236\u5668 -->\n    <div class=\"controllerContainer\">\n      <div @click=\"audioPlay(1)\">\u64ad\u653e<\/div>\n      <div @click=\"audioPlay(0)\">\u6682\u505c<\/div>\n      <div @click=\"destruction()\">\u9500\u6bc1\u5b9e\u4f8b\u91cd\u65b0\u521b\u5efa<\/div>\n    <\/div>\n  <\/div>\n<\/template>\n<script setup lang=\"ts\">\nimport \"audio-visualization-pro\"\nimport { onMounted } from \"vue\";\nimport audioAssets from \".\/assets\/audio.mp3\";\n\n  onMounted(()=>{\n    createVisualization()\n  })\n\n  let AVP:any = null;\n  \/**\u521d\u59cb\u5316\u5b9e\u4f8b *\/\n  const createVisualization = ()=>{\n    AVP = new (window as any).AudioVisualizationPro({\n      url:audioAssets,\n      loop:false\n    })\n  };\n  \/**\u64ad\u653e&\u6682\u505c *\/\n  const audioPlay = (type:number)=>{\n    if(type){\n      \/\/ currentTime . audiostate\n      AVP.play(({frequency}:any)=>{\n        createEcharts([...Array.from(frequency).reverse(), ...frequency])\n      })\n    }else{\n      AVP.suspend()\n    }\n  };\n  \/*\u9500\u6bc1\u5b9e\u4f8b*\/\n  const destruction = ()=>{\n    if(AVP){\n      AVP.destroy();\n      AVP = null;\n      createVisualization()\n    }\n  };\n  \/**\u5b9e\u4f8b\u5316Echarts *\/\n  const createEcharts = (data:any)=>{}\n\n\n<\/script><\/code><\/pre>\n\n\n\n
react<\/h3>\n\n\n\n
import '.\/App.css'\nimport \"audio-visualization-pro\"\nimport audioAssets from \".\/assets\/audio.mp3\"\n\nconst App:React.FC<any> = ()=>{\n\n  useEffect(()=>{\n    createVisualization()\n  })\n\n  let AVP:any = null;\n  \/**\u521d\u59cb\u5316\u5b9e\u4f8b *\/\n  const createVisualization = ()=>{\n    AVP = new (window as any).AudioVisualizationPro({\n      url:audioAssets,\n      loop:false\n    })\n  };\n  \/**\u64ad\u653e&\u6682\u505c *\/\n  const audioPlay = (type:number)=>{\n    if(type){\n      \/\/ currentTime . audiostate\n      AVP.play(({frequency}:any)=>{\n        createEcharts([...Array.from(frequency).reverse(), ...frequency])\n      })\n    }else{\n      AVP.suspend()\n    }\n  };\n  \/*\u9500\u6bc1\u5b9e\u4f8b*\/\n  const destruction = ()=>{\n    if(AVP){\n      AVP.destroy();\n      AVP = null;\n      createVisualization()\n    }\n  };\n  \/**\u5b9e\u4f8b\u5316Echarts *\/\n  const createEcharts = (data:any)=>{};\n\n\n  return (\n    <div className=\"app\">\n      <div className=\"titleContainer\">\u97f3\u9891\u53ef\u89c6\u5316<\/div>\n      <div className=\"echartsContainer\" id=\"echartsContainer\"><\/div>\n      <div className=\"controllerContainer\">\n        <div onClick={()=>audioPlay(1)}>\u64ad\u653e<\/div>\n        <div onClick={()=>audioPlay(0)}>\u6682\u505c<\/div>\n        <div onClick={()=>destruction()}>\u9500\u6bc1\u5b9e\u4f8b\u91cd\u65b0\u521b\u5efa<\/div>\n      <\/div>\n    <\/div>\n  )\n}\n\nexport default App<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u7b80\u4ecb `audio-visualization-pro` \u662f\u9488\u5bf9 `audio-visualization`\u5f00 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38],"tags":[],"class_list":["post-965","post","type-post","status-publish","format-standard","hentry","category-38"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/965","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=965"}],"version-history":[{"count":3,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/965\/revisions"}],"predecessor-version":[{"id":972,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/965\/revisions\/972"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=965"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=965"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}