<tfoot id='6F9OK'></tfoot>
<i id='6F9OK'><tr id='6F9OK'><dt id='6F9OK'><q id='6F9OK'><span id='6F9OK'><b id='6F9OK'><form id='6F9OK'><ins id='6F9OK'></ins><ul id='6F9OK'></ul><sub id='6F9OK'></sub></form><legend id='6F9OK'></legend><bdo id='6F9OK'><pre id='6F9OK'><center id='6F9OK'></center></pre></bdo></b><th id='6F9OK'></th></span></q></dt></tr></i><div id='6F9OK'><tfoot id='6F9OK'></tfoot><dl id='6F9OK'><fieldset id='6F9OK'></fieldset></dl></div>

    <legend id='6F9OK'><style id='6F9OK'><dir id='6F9OK'><q id='6F9OK'></q></dir></style></legend>

    <small id='6F9OK'></small><noframes id='6F9OK'>

        • <bdo id='6F9OK'></bdo><ul id='6F9OK'></ul>

        由于 CORS 访问限制本地 mp3 文件,MediaElementAudioSource 输出零

        时间:2023-05-16
        <legend id='txXGf'><style id='txXGf'><dir id='txXGf'><q id='txXGf'></q></dir></style></legend>
      1. <i id='txXGf'><tr id='txXGf'><dt id='txXGf'><q id='txXGf'><span id='txXGf'><b id='txXGf'><form id='txXGf'><ins id='txXGf'></ins><ul id='txXGf'></ul><sub id='txXGf'></sub></form><legend id='txXGf'></legend><bdo id='txXGf'><pre id='txXGf'><center id='txXGf'></center></pre></bdo></b><th id='txXGf'></th></span></q></dt></tr></i><div id='txXGf'><tfoot id='txXGf'></tfoot><dl id='txXGf'><fieldset id='txXGf'></fieldset></dl></div>

          • <bdo id='txXGf'></bdo><ul id='txXGf'></ul>
            <tfoot id='txXGf'></tfoot>

                <tbody id='txXGf'></tbody>

              <small id='txXGf'></small><noframes id='txXGf'>

                  本文介绍了由于 CORS 访问限制本地 mp3 文件,MediaElementAudioSource 输出零的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

                  问题描述

                  限时送ChatGPT账号..

                  我有以下 html 页面,我正在尝试展示一个用于演示具有本地存储的 mp3 的音频可视化器的类:

                  I have the following html page that I'm trying to show a class for demonstrating an audio visualizer with an mp3 stored locally:

                  <!doctype html>
                  <html>
                  <head>
                      <header name = "Access-Control-Allow-Origin" value = "*" /> 
                      <style type = "text/css">
                              div#mp3_player{ width: 500px; height: 60px; background: #000; padding: 5px; margin: 50px auto;}
                          div#mp3_player > div > audio{ width: 500px; background: #000; float: left; }
                          div#mp3_player > canvas { width: 500px; height: 30px; background: #002D3C; float: left;}
                      </style>
                      <script>
                      //create new instance of audio 
                      var audio = new Audio();
                      audio.src = 'C:/Users/Adam/Desktop/1901.m4a';
                      audio.controls = true;
                      audio.loop = true;
                      audio.autoplay = true;
                  
                      var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
                  
                      window.addEventListener("load", initMp3Player, false);
                  
                  
                      function frameLooper(){
                          window.webkitRequestAnimationFrame(frameLooper);
                          fbc_array = new Uint8Array(analyser.frequencyBinCount);
                          analyser.getByteFrequencyData(fbc_array);
                          ctx.clearRect(0, 0, canvas.width, canvas.height);
                          ctx.fillStyle = "#00CCFF";
                          bars = 100;
                          for (var i = 0; i < bars; i++){
                              bar_x = i * 3;
                              bar_width = 2;
                              bar_height = -(fbc_array[i]/2);
                              ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
                          }
                      }
                  
                      function initMp3Player(){
                          document.getElementById('audio_box').appendChild(audio);
                          context = new AudioContext();
                          analyser = context.createAnalyser();
                          canvas = document.getElementById('analyser_render');
                          ctx = canvas.getContext('2d');
                          source = context.createMediaElementSource(audio);
                          source.connect(analyser);
                          analyser.connect(context.destination);
                          frameLooper();
                      }
                  
                      </script>
                  
                  </head>
                  
                  <body>
                      <div id = "mp3_player">
                          <div id = "audio_box"></div>
                          <canvas id = "analyser_render"></canvas>
                      </div>
                  
                  </body>
                  

                  在使用脚本标签中的所有代码之前,我已经让 mp3 文件自动播放,不包括行下的代码

                  I've gotten the mp3 file to play automatically before using all of the code in the script tag excluding what's below the line

                  audio.autoplay = true;
                  

                  但是当我包含 frameLooper 函数时,我收到消息MediaElementAudioSource 由于 CORS 访问限制而输出零."既然是本地文件,有没有办法规避这个问题?

                  but when I include the frameLooper function I get the message "MediaElementAudioSource outputs zeros due to CORS access restrictions." Is there anyway to circumvent this since it's a local file?

                  推荐答案

                  在初始化Audio对象后,添加如下内容:

                  Just after initializing the Audio object, add the following:

                  audio.crossOrigin = "anonymous";
                  

                  这应该可以防止 CORS 访问限制.

                  This should prevent the CORS access restriction.

                  这篇关于由于 CORS 访问限制本地 mp3 文件,MediaElementAudioSource 输出零的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

                  上一篇:在同一来源上发出 XMLHttpRequest 时,有没有办法不发送 cookie? 下一篇:获取 POST 请求中的空正文

                  相关文章

                • <i id='l0Lfq'><tr id='l0Lfq'><dt id='l0Lfq'><q id='l0Lfq'><span id='l0Lfq'><b id='l0Lfq'><form id='l0Lfq'><ins id='l0Lfq'></ins><ul id='l0Lfq'></ul><sub id='l0Lfq'></sub></form><legend id='l0Lfq'></legend><bdo id='l0Lfq'><pre id='l0Lfq'><center id='l0Lfq'></center></pre></bdo></b><th id='l0Lfq'></th></span></q></dt></tr></i><div id='l0Lfq'><tfoot id='l0Lfq'></tfoot><dl id='l0Lfq'><fieldset id='l0Lfq'></fieldset></dl></div>

                    <small id='l0Lfq'></small><noframes id='l0Lfq'>

                        <bdo id='l0Lfq'></bdo><ul id='l0Lfq'></ul>
                      <tfoot id='l0Lfq'></tfoot>
                    1. <legend id='l0Lfq'><style id='l0Lfq'><dir id='l0Lfq'><q id='l0Lfq'></q></dir></style></legend>