Question

我在使用Three.js音频时遇到了一些问题。

当您在Three js中打开页面时，如何制作.mp3文件？我没有找到任何示例，任何教程，没有任何东西，任何地方都没有。我有以下代码：

var listener = new THREE.AudioListener();
camera.add( listener );

// create a global audio source
var sound = new THREE.Audio( listener );

var audioLoader = new THREE.AudioLoader();

//Load a sound and set it as the Audio object's buffer
audioLoader.load( 'sounds/ambient.ogg', function( buffer ) {
    sound.setBuffer( buffer );
    sound.setLoop(true);
    sound.setVolume(0.5);
    sound.play();
});

如何让它发挥？

Answer 1

你应该包括：

// onProgress callback
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// onError callback
function ( err ) {
console.log( 'Un error ha ocurrido' );
}

所以你的代码将是：

var listener = new THREE.AudioListener();
camera.add( listener );

// create a global audio source
var sound = new THREE.Audio( listener );

var audioLoader = new THREE.AudioLoader();

//Load a sound and set it as the Audio object's buffer
audioLoader.load( 'sounds/ambient.ogg', function( buffer ) {
    sound.setBuffer( buffer );
    sound.setLoop(true);
    sound.setVolume(0.5);
    sound.play();
},
            // onProgress callback
            function ( xhr ) {
                console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
            },

            // onError callback
            function ( err ) {
                console.log( 'Un error ha ocurrido' );
            }

);

Answer 2

试试这个链接 https://codepen.io/EllenProbst/pen/RQQmJK，下面我删除了大部分不需要播放音频的 JavaScript 代码。它适用于 m4a，但也适用于 mp3 和 ogg 格式。

// Music by The War On Drugs - Thinking Of A Place

var camera, scene, renderer;

var stream = "https://cdn.rawgit.com/ellenprobst/web-audio-api-with-Threejs/57582104/lib/TheWarOnDrugs.m4a";

// init
function init() {
    // scene
    scene = new THREE.Scene();
    scene.fog = new THREE.FogExp2(0x01131e, 0.025);

    // camera
    camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.01, 1000);
    camera.position.set(0.1, -0.14, 0.8);

    // renderer
    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    
    renderer.setClearColor("#01131E");
    document.body.appendChild(renderer.domElement);

    // AUDIO
    var audioLoader = new THREE.AudioLoader();
    var listener = new THREE.AudioListener();
    var audio = new THREE.Audio(listener);
    audioLoader.load(stream, function(buffer) {
        audio.setBuffer(buffer);
        audio.setLoop(true);
        audio.play();
    });


}


// animate
function animate() {

    requestAnimationFrame(animate);
    render();
}

// render
function render() {
    renderer.render(scene, camera);
}

init();
animate();

如何在三个JS中播放音频

2 个答案: