可以使用Web Audio API和createMediaElementSource分析来自Icecast的流音频吗?

问题描述

使用Web Audio API和createMediaElement方法，可以使用类型化的数组从<audio>元素中的音频播放中获取频率数据，并且只要源URL是本地URL(非流传输)，它就可以在大多数浏览器中使用.请参阅Codepen: http://codepen.io/soulwire/pen/Dscga

Using the Web Audio API and createMediaElement method you can use a typed array to get frequency data from audio playback in an <audio> element and it works in most browsers as long as the source URL is local (not streaming). See Codepen: http://codepen.io/soulwire/pen/Dscga

实际代码:

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var audioElement = new Audio('http://crossorigin.me/http://87.230.103.9:80/top100station.mp3'); // example stream

audioElement.crossOrigin = 'anonymous';
audioElement.type = 'audio/mpeg';

var analyser = audioCtx.createAnalyser();

audioElement.addEventListener('canplay', function() {
  var audioSrc = audioCtx.createMediaElementSource(audioElement);
  // Bind our analyser to the media element source.
  audioSrc.connect(analyser);
  audioSrc.connect(audioCtx.destination);
});

var frequencyData = new Uint8Array(20);

var svgHeight = ($window.innerHeight / 2) - 20;
var svgWidth = $window.innerWidth - 20;
var barPadding = '2';

function createSvg(parent, height, width) {
  return d3.select(parent).append('svg').attr('height', height).attr('width', width);
}

var svg = createSvg('.visualizer', svgHeight, svgWidth);

// Create our initial D3 chart.
svg.selectAll('rect')
   .data(frequencyData)
   .enter()
   .append('rect')
   .attr('x', function (d, i) {
      return i * (svgWidth / frequencyData.length);
   })
   .attr('width', svgWidth / frequencyData.length - barPadding);

// Continuously loop and update chart with frequency data.
function renderChart() {
   requestAnimationFrame(renderChart);

   // Copy frequency data to frequencyData array.
   analyser.getByteFrequencyData(frequencyData);

   console.log(frequencyData);

   // Update d3 chart with new data.
   svg.selectAll('rect')
      .data(frequencyData)
      .attr('y', function(d) {
         return svgHeight - d;
      })
      .attr('height', function(d) {
        return d;
      })
      .style('opacity', function(d) {
        return d / 255;
      })
      .attr('fill', function() {
         return 'rgb(255, 255, 255)';
      });
}

// Run the loop
renderChart();

.visualizer为空的<div>

我正在为使用Ionic/Angular的广播电台开发混合应用程序，并且音频流通过Icecast( http://dir.xiph.org/)，我遇到了以下问题:对本地mp3进行了分析和可视化，但是如果使用流URL，则analyser.getByteFrequencyData在iOS Safari中全为零，但是它打得很好.

I'm developing a hybrid app for a radio station using Ionic/Angular and the audio stream is through Icecast (http://dir.xiph.org/) and I've run into the following issue: local mp3s are analyzed and visualized no problem however if you use the streaming URL, analyser.getByteFrequencyData is all zeroes in iOS Safari but it plays fine.

所以回顾一下:

我知道Safari的早期版本中存在一个错误，该错误会导致createMediaElementSource()失败，但是如果仍然如此，那么它将无法在本地文件上工作?

I know there was a bug in earlier versions of Safari where createMediaElementSource() would fail but if that were still the case then it wouldn't work on the local file?

有什么想法吗?

推荐答案

仍然无法在Safari和iOS Chrome(使用Apple WebKit?)上使用.现在其他浏览器似乎还不错.音频播放正常，CORS正常-但Analyzer无法正常工作.

Still not working with Safari and iOS Chrome (which is using Apple WebKit?). Other browsers seem to be fine now. Audio plays fine, CORS is ok - yet Analyser is not working.

这个小提琴(不是我的)很好地演示了这种行为.后面的uri得到了分析，以前没有:

This fiddle (not mine) demonstrates the behavior well. Latter uri gets analysed, former not:

  const url = useStream
  ? 'https://c2.radioboss.fm:18071/stream'
  : 'https://twgljs.org/examples/sounds/DOCTOR%20VOX%20-%20Level%20Up.mp3';

Apple论坛中的相关问题(无答案)

这篇关于可以使用Web Audio API和createMediaElementSource分析来自Icecast的流音频吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！