javascript - id 标签导致音频无法在 chrome 中播放

标签 javascript html google-chrome audio web-audio-api

我在网页上有一个音频元素，我需要向该元素添加一个 id 标签“播放器”。我正在使用 getElementById("player")。

问题中的元素:

<audio id="player" controls loop>
     <source src="Out_of_the_Skies_Under_the_Earth.mp3" type="audio/mp3">
</audio>

我使用“播放器”标签使接下来的两行有用，使用 Web 音频 API:

var mediaElement = document.getElementById('player');
var sourceNode = context.createMediaElementSource(mediaElement);

这是我唯一使用 ID“玩家”的地方，我对任何替代方案持开放态度。

当我添加 id 标签时，音频不会在 Chrome 中播放(它会在没有标签的情况下播放)。它可以在 Safari 和 Opera 中正常播放，但不能在 Chrome 中播放。我尝试使用 .ogg 将文件并轨到较小的位/采样率，改用 getElementByClassName，但似乎没有任何效果。

编辑: 另外，我想指出播放器确实显示了正确的音频文件长度 (6:03)，并且显示了进度条的移动和正确的时间更新。就好像声音被静音了一样。

由于我的音频文件是本地的，所以这段代码不一定是我遇到的问题。

自从发布这篇文章后，我注意到我收到错误:“由于 [本地文件] 的 CORS 访问限制，MediaElementAudioSource 输出零”我认为在我自己的域下托管具有所需 CORS header 的文件可能会修复问题。我现在没有时间实现这个，但我会在下面的答案中更新我的解决方案。

但与此同时，任何建议都会很棒。

var ctx = window.AudioContext || window.webkitAudioContext;
var context = new ctx();

var mediaElement = document.getElementById('player');
var sourceNode = context.createMediaElementSource(mediaElement);

// create the equalizer. It's a set of biquad Filters

var filters = [];

    // Set filters
    [60, 170, 350, 1000, 3500, 10000].forEach(function(freq, i) {
      var eq = context.createBiquadFilter();
      eq.frequency.value = freq;
      eq.type = "peaking";
      eq.gain.value = 0;
      filters.push(eq);
    });

 // Connect filters in serie
   sourceNode.connect(filters[0]);
   for(var i = 0; i < filters.length - 1; i++) {
      filters[i].connect(filters[i+1]);
    }

// connect the last filter to the speakers
filters[filters.length - 1].connect(context.destination);

function changeGain(sliderVal,nbFilter) {
  var value = parseFloat(sliderVal);
  filters[nbFilter].gain.value = value;

  // update output labels
  var output = document.querySelector("#gain"+nbFilter);
  output.value = value + " dB";
}
div audio {
  display: block;
  margin-bottom:10px;
}

.eq {
  margin: 32px;
  border:1px solid;
  border-radius:15px;
  background-color:lightGrey;
  padding:10px;
  width:300px;
  box-shadow: 10px 10px 5px grey;
  text-align:center;
  font-family: "Open Sans";
  font-size: 12px;
}


div.controls:hover {
  color:blue;
  font-weight:bold;
}
div.controls label {
  display: inline-block;
  text-align: center;
  width: 50px;
}

div.controls label, div.controls input, output {
    vertical-align: middle;
    padding: 0;
    margin: 0;
   font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;
  font-size: 12px;
}
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Equalizer with Bi-Quad Filters</title>



      <link rel="stylesheet" href="css/style.css">


</head>

<body>

  <html lang="en">
  <head>
  </head>
<body>

<div class="eq">
  <audio id="player" controls crossorigin="anonymous" loop>
  <source src="https://vocaroo.com/i/s1lfs67BmoTC">

</audio>
  <div class="controls">
    <label>60Hz</label>
    <input type="range" value="0" step="1" min="-30" max="30" oninput="changeGain(this.value, 0);"></input>
  <output id="gain0">0 dB</output>
  </div>
  <div class="controls">
    <label>170Hz</label>
    <input type="range" value="0" step="1" min="-30" max="30" oninput="changeGain(this.value, 1);"></input>
<output id="gain1">0 dB</output>
  </div>
  <div class="controls">
    <label>350Hz</label>
    <input type="range" value="0" step="1" min="-30" max="30" oninput="changeGain(this.value, 2);"></input>
<output id="gain2">0 dB</output>
  </div>
  <div class="controls">
    <label>1000Hz</label>
    <input type="range" value="0" step="1" min="-30" max="30" oninput="changeGain(this.value, 3);"></input>
<output id="gain3">0 dB</output>
  </div>
  <div class="controls">
    <label>3500Hz</label>
    <input type="range" value="0" step="1" min="-30" max="30" oninput="changeGain(this.value, 4);"></input>
<output id="gain4">0 dB</output>
  </div>
  <div class="controls">
    <label>10000Hz</label>
    <input type="range" value="0" step="1" min="-30" max="30" oninput="changeGain(this.value, 5);"></input>
<output id="gain5">0 dB</output>
  </div>
</div>
</body>
</html>



    <script  src="js/index.js"></script>




</body>

</html>

最佳答案

网址设置为<source>元素 src属性不与 CORS header 一起提供，也不是 .mp3文件。

避免

MediaElementAudioSource outputs zeroes due to CORS access restrictions for <URL>

错误，可以使用fetch() , Body.blob()获取由 Access-Control-Allow-Origin 提供的资源 header ，URL.createObjectURL()转换 Blob到 Blob URL , 然后设置 <audio>元素 src到 Blob URL .

另请注意 <input>标签是自动关闭的；和 filters应该全局定义。

var ctx = window.AudioContext || window.webkitAudioContext;
var context = new ctx();
var url = "https://ia600305.us.archive.org/30/items/return_201605/return.mp3";

var filters = [];

fetch(url)
  .then(response => response.blob())
  .then(blob => {
    var blobURL = URL.createObjectURL(blob);
    var mediaElement = document.getElementById('player');
    mediaElement.src = blobURL;
    var sourceNode = context.createMediaElementSource(mediaElement);

    // create the equalizer. It's a set of biquad Filters
    // Set filters
    [60, 170, 350, 1000, 3500, 10000].forEach(function(freq, i) {
      var eq = context.createBiquadFilter();
      eq.frequency.value = freq;
      eq.type = "peaking";
      eq.gain.value = 0;
      filters.push(eq);
    });

    // Connect filters in serie
    sourceNode.connect(filters[0]);
    for (var i = 0; i < filters.length - 1; i++) {
      filters[i].connect(filters[i + 1]);
    }

    // connect the last filter to the speakers
    filters[filters.length - 1].connect(context.destination);

  });

function changeGain(sliderVal, nbFilter) {
  var value = parseFloat(sliderVal);
  filters[nbFilter].gain.value = value;

  // update output labels
  var output = document.querySelector("#gain" + nbFilter);
  output.value = value + " dB";
}
div audio {
  display: block;
  margin-bottom: 10px;
}

.eq {
  margin: 32px;
  border: 1px solid;
  border-radius: 15px;
  background-color: lightGrey;
  padding: 10px;
  width: 300px;
  box-shadow: 10px 10px 5px grey;
  text-align: center;
  font-family: "Open Sans";
  font-size: 12px;
}

div.controls:hover {
  color: blue;
  font-weight: bold;
}

div.controls label {
  display: inline-block;
  text-align: center;
  width: 50px;
}

div.controls label,
div.controls input,
output {
  vertical-align: middle;
  padding: 0;
  margin: 0;
  font-family: "Open Sans", Verdana, Geneva, sans-serif, sans-serif;
  font-size: 12px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Equalizer with Bi-Quad Filters</title>

</head>
<body>

    <div class="eq">
      <audio id="player" controls crossorigin="anonymous" loop></audio>
      <div class="controls">
        <label>60Hz</label>
        <input type="range" value="0" step="1" min="-30" max="30" oninput="changeGain(this.value, 0);">
        <output id="gain0">0 dB</output>
      </div>
      <div class="controls">
        <label>170Hz</label>
        <input type="range" value="0" step="1" min="-30" max="30" oninput="changeGain(this.value, 1);">
        <output id="gain1">0 dB</output>
      </div>
      <div class="controls">
        <label>350Hz</label>
        <input type="range" value="0" step="1" min="-30" max="30" oninput="changeGain(this.value, 2);">
        <output id="gain2">0 dB</output>
      </div>
      <div class="controls">
        <label>1000Hz</label>
        <input type="range" value="0" step="1" min="-30" max="30" oninput="changeGain(this.value, 3);">
        <output id="gain3">0 dB</output>
      </div>
      <div class="controls">
        <label>3500Hz</label>
        <input type="range" value="0" step="1" min="-30" max="30" oninput="changeGain(this.value, 4);">
        <output id="gain4">0 dB</output>
      </div>
      <div class="controls">
        <label>10000Hz</label>
        <input type="range" value="0" step="1" min="-30" max="30" oninput="changeGain(this.value, 5);">
        <output id="gain5">0 dB</output>
      </div>
    </div>
  </body>

  </html>

关于javascript - id 标签导致音频无法在 chrome 中播放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48370887/

上一篇：html - 如何删除链接 <a> 和它位于 <li> 中的列表项之间的所有填充？或者...点击 <li> 打开里面的链接？

下一篇：html - Rmarkdown TOC 链接(文档内部)不起作用

相关文章：

javascript - 如何访问 Angular UI 网格中已排序的行？

javascript - 使用 javascript 自动提交 asp.net 表单

javascript - 将图层添加到另一个图层

javascript - Chrome 扩展程序 : Toggle content_script via browser_action

jquery - jQuery-查找确切的点击目标(代码在Chrome中有效，但在Firefox中无效)

javascript - 使用 javascript 动态添加 CSS

javascript - 用类更改第一个子元素的CSS

html - 如何创建具有 100% 宽度图像的基于网格的网站？

javascript - ace 编辑器不显示 <html>

c# - 通过 WebClient C# 从 Google.Drive 下载文件

©2024 IT工具网  联系我们