个人中心
gpt4 book ai didi

javascript - 当 MediaElementAudioSource 输出零但 CORS 不再是问题时，如何播放音频？

转载 作者：搜寻专家 更新时间：2023-11-01 05:10:24 25 4
gpt4 key购买 nike

我正在尝试实现 <audio>进入 THREE.js 场景，我在播放音频时遇到了一些问题。在我注销到 console 的数组中，所有的输出都是“0”。我已经通过放置以下内容来解决 CORS 问题:audio.crossOrigin = "anonymous"在audio.play();之后初始化，但无济于事。任何想法，将不胜感激。

哦，我也用服务器测试过，所以这不是问题。

Here是 repo 协议(protocol)的链接。

Here是jsbin。

下面是代码。

HTML

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Threejs Experiment</title>
  <link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>
</head>

<body>
<audio id="song" src="https://soundcloud.com/madeon/madeon-cut-the-kid"></audio>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

</body>

</html>

JavaScript

$(function(){

// Add Audio context and Audio
var ctx = new AudioContext();
var audio = document.getElementById('song');
var audioSrc = ctx.createMediaElementSource(audio);
var analyser = ctx.createAnalyser();

audioSrc.connect(analyser);
audioSrc.connect(ctx.destination);
var frequencyData = new Uint8Array(analyser.frequencyBinCount);

// Set scene and camera
var scene = new THREE.Scene();
var aspectRatio = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 100);
camera.target = new THREE.Vector3( 10, 10, 10 );

// Set the DOM
var renderer = new THREE.WebGLRenderer({ antialias:true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor("#000000");
document.body.appendChild(renderer.domElement);

// Add controls
// controls = new THREE.OrbitControls(camera, renderer );
// controls.addEventListener( 'change', render );

// Move the camera
camera.position.z = 10;
camera.position.y = 0;

// Point Lights

var pointLightBlue = new THREE.PointLight( "#00ccff", 5, 100, 2 );
pointLightBlue.position.set( -10, -40, -10 );
scene.add(pointLightBlue);

// var pointLightBlue = new THREE.PointLight( "#ffffff", 1, 0, 1 );
// pointLightBlue.position.set( -10, 20, -10 );
// scene.add(pointLightBlue);

// var pointLightPink = new THREE.PointLight( "#EE567C", 5, 100, 10 );
// pointLightPink.position.set( 1, 0, -5 );
// scene.add(pointLightPink);

var pointLight = new THREE.PointLight( "#A805FA", 100, 1000, 40 );
pointLight.position.set( 40, 0, 40 );
scene.add(pointLight);

var sphereSize = 5;
var pointLightHelper = new THREE.PointLightHelper( pointLight, sphereSize );
scene.add( pointLightHelper );

var pointLight2 = new THREE.PointLight( "#07FAA0", 100, 1000, 30 );
pointLight2.position.set( -40, 0, -40 );
scene.add(pointLight2);

var sphereSize = 5;
var pointLightHelper = new THREE.PointLightHelper( pointLight2, sphereSize );
scene.add( pointLightHelper );

var quantity = 50;
var shapes = [];


for (var i = 0; i < quantity; i++) {

    if(Math.random() < 0.5){
      var geometry = new THREE.RingGeometry( 50, 50, 18);

      // var geometries = [
            //      new THREE.IcosahedronGeometry( 20, 0 ),
            //      new THREE.OctahedronGeometry( 20, 0 ),
            //      new THREE.TetrahedronGeometry( 20, 0 ),
            //  ];
      //
            // var geometry = geometries[ Math.floor( Math.random() * geometries.length ) ];
            // var material = new THREE.MeshLambertMaterial( {
            //  color: new THREE.Color( Math.random(), Math.random() * 0.5, Math.random() ),
            //  blending: THREE.AdditiveBlending,
            //  depthTest: false,
            //  shading: THREE.FlatShading,
            //  transparent: true
            // } );
            // var mesh = new THREE.Mesh( geometry, material );
            // var wireframe = mesh.clone();
            // wireframe.material = wireframe.material.clone();
            // wireframe.material.wireframe = true;
            // mesh.add( wireframe );
            // scene.add(mesh);

      // var geometry = new THREE.RingGeometry( 20, 150, 18);

        //var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
    }
    else {
      // var geometry = new THREE.RingGeometry( 4, 40, 3);


      // var geometry = new THREE.RingGeometry( 1, 5, 6 );
      // var material = new THREE.MeshBasicMaterial( { color: 0xffff00,
      //   side: THREE.DoubleSide } );
      // var mesh = new THREE.Mesh( geometry, material );
      // scene.add( mesh );

      // var points = [];
      // for ( var j = 0; j < 10; j++ ) {
      //    points.push( new THREE.Vector3( Math.sin( j * 0.2 ) * 15 + 50, 0, ( j - 5 ) * 2 ) );
      //
      // }
      // var geometry = new THREE.LatheGeometry( points );
      // var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
      // var lathe = new THREE.Mesh( geometry, material );
      // scene.add( lathe );
    }

    if(i % 7 === 0) {
        var material = new THREE.MeshPhongMaterial( { color: "#ffffff"} );
    }
    else if(i % 2 === 0){
        var material = new THREE.MeshPhongMaterial( { color: "#666666"} );
    }
    else {
        var material = new THREE.MeshPhongMaterial( { color: "#333333"} );
    }

    var mesh = new THREE.Mesh(geometry, material);
    mesh.position.z = -i * 2;
    mesh.rotation.z = i;
    shapes.push(mesh);
    scene.add(mesh);
}

// Variables
var u_time = 0;

// Render function
var render = function() {
    requestAnimationFrame(render);
    u_time++;

    for (var i = 0; i < quantity; i++) {

        // Set rotation change of shapes
        shapes[i].position.z += 0.2;
        shapes[i].rotation.z += 0;
        shapes[i].scale.x = 1 + Math.sin(i + u_time * 0.1) * 0.05;
        shapes[i].scale.y = 1 + Math.sin(i + u_time * 0.1) * 0.05;

        var change = 1.5 + Math.sin(u_time * 0.5) * 0.5;

        // Set wireframe & width
        if(Math.random() < change){
            shapes[i].material.wireframe = true;
            shapes[i].material.wireframeLinewidth = Math.random() * 2;
        }
        else {
            shapes[i].material.wireframe = false;
        }

        if(shapes[i].position.z > 10){
            shapes[i].position.z = -70;
            shapes[i].rotation.z = i;
        }
    }

    // Set Point light Intensity & Position
    pointLight.intensity = Math.abs(Math.sin(u_time * 0.2) * 2);
    pointLight2.intensity = Math.abs(Math.cos(u_time * 0.2) * 2);
    pointLight.position.z = Math.abs(Math.sin(u_time * 0.02) * 30);
    pointLight2.position.z = Math.abs(Math.cos(u_time * 0.02) * 30);

    // camera.rotation.y = 90 * Math.PI / 180;
    // camera.rotation.z = frequencyData[20] * Math.PI / 180;
    // camera.rotation.x = frequencyData[100] * Math.PI / 180;
    console.log(frequencyData);

    //composer.render();
    renderer.render(scene, camera);

}
audio.play();
// audio.crossOrigin = "anonymous";
render();
});

最佳答案

“CORS 不是问题”是什么意思？

  1. 如果音频来自不同的来源，您需要设置 crossOrigin 属性BEFORE 设置 src 属性

    someAudioElement.crossOrigin = "anonymous";

    换句话说，要么将 crossOrigin 属性放在标签本身

    <audio crossOrigin="anonymous" src="http://somedomain/someaudio">...

    或者在 JavaScript 中

    someAudioElement.crossOrigin = "anonymous";
    someAudioElement.src = "http://somedomain/someaudio";

    您之前必须这样做的原因是因为当您设置 src 属性时，浏览器将尝试获取音频。如果您尚未设置 crossOrigin 属性，浏览器将不知道请求使用音频的权限。

    请注意，所做的只是向服务器请求许可。服务器本身仍然必须授予浏览器使用音频的权限。大多数服务器不提供此权限。 Soundcloud 可以，但不适用于所有歌曲。

  2. iOS 上的 Safari 和 Android 上的 Chrome 不支持分析流式音频数据。

    您可以追踪the Chrome issue to fix this here .如果您想跟踪进度，请给它加星标。不知道有没有webkit bug在 iOS 上跟踪问题

  3. 据我所知，您不能直接播放 soundcloud URL

    你有这样的代码

    <audio id="song" src="https://soundcloud.com/madeon/madeon-cut-the-kid"></audio>

    这不是 soundcloud 音频的有效 URL。您必须将该 URL 连同 API key 传递给 soundcloud API，它会返回一个正确的 URL。

    Here's an SO question about it

    其他注意事项:

    • soundcloud SDK 3.0 SDK 无法在 Safari 上运行以分析音频。使用 soundcloud SDK 2.0 或更高版本，使用直接的 XMLHttpRequest，因为即使您不使用 soundcloud SDK 2.0 也会初始化 flash。

    • 使用 soundcloud sdk 2.0 的示例

      在 HTML 中

      <script src="https://connect.soundcloud.com/sdk-2.0.0.js"></script>

      在 JavaScript 中

      // see https://auth0.com/docs/connections/social/soundcloud
      var yourSoundCloudClientId = "???????";
      SC.initialize({
        client_id: yoursCoundCloudClientId,
      });

      var soundCloudURL = "https://soundcloud.com/madeon/madeon-cut-the-kid";
      SC.get("/resolve", { url: soundCloudUrl }, function(result, err) {
        if (err) {
          console.error("bad url:", url, err);
          return;
        }
        if (result.streamable && result.stream_url) {
          var src = result.stream_url + '?client_id=' + yourSoundCloudClientId;
          someAudioElement.crossOrigin = "anonymous";
          someAudioElement.src = src;

          // other things you might be interested in because
          // if you use soundcloud music you're required to give
          // and display attribution and links

          console.log("link to music:", result.permalink_url);
          console.log("link to band:", result.user.permalink_url);
          console.log("name of song:", result.title);
          console.log("name to band:", result.user.username);
        } else {
           console.error("not streamable:", url);
        }
      });

      This example在没有 soundcloud SDK 的情况下做到这一点。

关于javascript - 当 MediaElementAudioSource 输出零但 CORS 不再是问题时，如何播放音频？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34782046/

25 4 0
文章推荐： javascript - 带算术表达式的 for 循环
文章推荐： javascript - 推送对象在 JavaScript 中无法正常工作
文章推荐： javascript - 在 bootbox bootstrap jquery 插件中将自定义类添加到警报对话框
文章推荐： javascript - RPivotTable 能够列出超过允许的数量
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com