{"id":3320,"date":"2016-10-28T14:41:54","date_gmt":"2016-10-28T06:41:54","guid":{"rendered":"http:\/\/blog.hoyo.idv.tw\/?p=3320"},"modified":"2017-05-08T13:38:36","modified_gmt":"2017-05-08T05:38:36","slug":"web-audio-api-%e4%bd%bf%e7%94%a8-%e4%bb%a5%e5%8f%8a%e6%a0%b9%e6%93%9a%e6%99%82%e9%96%93%e8%a8%ad%e5%ae%9a%e8%ae%8a%e5%8c%96%e7%9a%84%e9%a0%bb%e8%ad%9c%e5%9c%96","status":"publish","type":"post","link":"https:\/\/blog.hoyo.idv.tw\/?p=3320","title":{"rendered":"Web Audio API - \u4f7f\u7528 <audio> \u4ee5\u53ca\u6839\u64da\u6642\u9593\u8a2d\u5b9a\u8b8a\u5316\u7684\u983b\u8b5c\u5716"},"content":{"rendered":"<h2>\u53c3\u8003<\/h2>\n<ul>\n<li><a href=\"http:\/\/ianreah.com\/2013\/02\/28\/Real-time-analysis-of-streaming-audio-data-with-Web-Audio-API.html\">Real-time analysis of streaming audio data with Web Audio API<\/a><\/li>\n<li><a href=\"http:\/\/www.cnblogs.com\/Wayou\/p\/html5_audio_api_visualizer.html\">\u5f00\u5927\u4f60\u7684\u97f3\u54cd\uff0c\u611f\u53d7HTML5 Audio API\u5e26\u6765\u7684\u89c6\u542c\u76db\u5bb4<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_Audio_API\">Web Audio API<\/a><\/li>\n<\/ul>\n<p>--<\/p>\n<h2>\u5be6\u4f5c<\/h2>\n<p>\u4f7f\u7528 Canvas \u7e6a\u5716<\/p>\n<pre class=\"lang:default decode:true\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head lang=\"en\"&gt;\r\n    &lt;meta charset=\"UTF-8\"&gt;\r\n    &lt;title&gt;&lt;\/title&gt;\r\n    &lt;script src=\"..\/js\/jquery-1.11.3.min.js\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;div id=\"example\"&gt;\r\n    &lt;audio id=\"player\" class=\"hideIfNoApi\" controls=\"controls\" src=\"http:\/\/ianreah.apphb.com\/sounds\/movement%20proposition.mp3\" crossorigin=\"anonymous\"&gt; &lt;\/audio&gt;\r\n\r\n    &lt;div id=\"visualisation\" class=\"hideIfNoApi\"&gt; &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;div id=\"visualizer_wrapper\"&gt;\r\n    &lt;canvas id='canvas' width=\"702\" height=\"350\" style=\"border: 1px #eee solid;\"&gt;&lt;\/canvas&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;script&gt;\r\n    $(function () {\r\n        context = new (window.AudioContext || window.webkitAudioContext)();\r\n        \r\n        \/\/ Create the analyser\r\n        var analyser = context.createAnalyser();\r\n        \r\n        \/\/ https:\/\/developer.mozilla.org\/zh-TW\/docs\/Web\/API\/AnalyserNode\/fftSize\r\n        analyser.fftSize = 64;\r\n        \r\n        \/\/ Get the frequency data and update the visualisation\r\n        function update() {\r\n            var canvas = document.getElementById('canvas'),\r\n                    cwidth = canvas.width,\r\n                    cheight = canvas.height - 2,\r\n                    meterWidth = 20, \/\/width of the meters in the spectrum\r\n                    gap = 2, \/\/gap between meters\r\n                    capHeight = 2,\r\n                    capStyle = '#fff',\r\n                    meterNum = 702 \/ (10 + 2), \/\/count of the meters\r\n                    capYPositionArray = []; \/\/store the vertical position of hte caps for the preivous frame\r\n            ctx = canvas.getContext('2d');\r\n            gradient = ctx.createLinearGradient(0, 0, 0, 300);\r\n            gradient.addColorStop(1, '#0f0');\r\n            gradient.addColorStop(0.5, '#ff0');\r\n            gradient.addColorStop(0, '#f00');\r\n\r\n            var drawMeter = function() {\r\n                var array = new Uint8Array(analyser.frequencyBinCount);\r\n                \r\n                analyser.getByteFrequencyData(array);\r\n                ctx.clearRect(0, 0, cwidth, cheight);\r\n                \r\n                for (var i = 0; i &lt; array.length; i++) {\r\n                    var value = array[i];\r\n                    if (capYPositionArray.length &lt; Math.round(meterNum)) {\r\n                        capYPositionArray.push(value);\r\n                    }\r\n                    ctx.fillStyle = gradient; \/\/set the filllStyle to gradient for a better look\r\n                    ctx.fillRect(i * 22 \/*\u9891\u8c31\u6761\u7684\u5bbd\u5ea6+\u6761\u95f4\u95f4\u8ddd*\/ , cheight - value + capHeight, meterWidth, cheight);\r\n                }\r\n                requestAnimationFrame(drawMeter);\r\n            };\r\n            \r\n            requestAnimationFrame(drawMeter);\r\n        }\r\n\r\n        \/\/ Hook up the audio routing...\r\n        \/\/ player -&gt; analyser -&gt; speakers\r\n        \/\/ (Do this after the player is ready to play - https:\/\/code.google.com\/p\/chromium\/issues\/detail?id=112368#c4)\r\n        $(\"#player\").bind('canplay', function() {\r\n            var source = context.createMediaElementSource(this);\r\n            source.connect(analyser);\r\n            analyser.connect(context.destination);\r\n\r\n            update();\r\n        });\r\n    });\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<ul>\n<li>analyser.fftSize<br \/>\n\u8a2d\u5b9a\u503c\u9664\u4ee5 2 \u5c31\u662f\u9663\u5217\u53d6\u6a23\u6578\uff0c\u9810\u8a2d 2048<\/li>\n<li>analyser.getByteFrequencyData(Uint8Array(analyser.frequencyBinCount));<br \/>\n\u6578\u503c\u5728 0 - 255 \uff0c\u6c92\u8072\u97f3\u70ba 0<\/li>\n<li>analyser.getByteTimeDomainData(Uint8Array(analyser.frequencyBinCount));<br \/>\n\u6578\u503c\u5728 0 - 255 \uff0c\u6c92\u8072\u97f3\u70ba 128<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/zh-TW\/docs\/Web\/API\/Window.requestAnimationFrame\" target=\"_blank\">requestAnimationFrame<\/a>\u00a0\u6839\u64da\u700f\u89bd\u5668\u8a2d\u5b9a(\u4e00\u822c\u4f86\u8aaa\u662f 60fps) \u66f4\u65b0<\/li>\n<li>\u80fd\u91cf\u689d\u7684\u9ad8\u5ea6\u662f\u6839\u64da 0-255 \u6240\u7e6a\u88fd\uff0c\u6240\u4ee5\u5982\u679c\u8981\u589e\u6e1b\u5c31\u5fc5\u9808\u8abf\u6574\u00a0analyser.getByteFrequencyData(array) \u7684 array \u503c<\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-3321\" src=\"http:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2016\/10\/Image-328-300x182.png\" alt=\"image-328\" width=\"300\" height=\"182\" srcset=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2016\/10\/Image-328-300x182.png 300w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2016\/10\/Image-328-495x300.png 495w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2016\/10\/Image-328.png 718w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>--<\/p>\n<div class=\"pvc_clear\"><\/div>\n<p class=\"pvc_stats all \" data-element-id=\"3320\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> &nbsp;1,534&nbsp;total views<\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u53c3\u8003 Real-time an...<\/p>\n<div class=\"pvc_clear\"><\/div>\n<p class=\"pvc_stats all \" data-element-id=\"3320\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> &nbsp;1,534&nbsp;total views<\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[262],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/3320"}],"collection":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3320"}],"version-history":[{"count":2,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/3320\/revisions"}],"predecessor-version":[{"id":3323,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/3320\/revisions\/3323"}],"wp:attachment":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3320"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}