如何使用p5.js和p5声音库将外部链接添加为声音?

时间:2019-03-13 17:46:26

标签: javascript html html5 audio p5.js

我一直在搞弄p5,它是声音库,我制作了一个小型网站来生成一堆圈子,我能够让圈子为一首预先加载的歌曲打动,但我想玩通过使用YouTube链接添加外部歌曲,但我无法正常工作。

var x, y, dx, dy, rad;
        var sound, amplitude;

        var soundAdd;
        let input, button;

        var circ = [];

        var col1, col2, col3; 

        var maxcircles = 25;

        var clicked = 0;

        var trail = 1;

        var follM = 0;

        var clean = 0;

        function addSound() {
            sound = new p5.SoundFile(input.value());
            console.log("Sound Added: " + input.value);
        }

        function setup() {
            createCanvas(window.innerWidth, window.innerHeight);
            background(51);

            amplitude = new p5.Amplitude();

            col1 = round(random(0, 256));
            col2 = round(random(0, 256));
            col3 = round(random(0, 256));

            rad = 20;

            for(var i = 0; i < maxcircles; i++) {
                circ.push(new Circle(x, y, rad, dx, dy, col1, col2, col3));
                dx = random(-10, 10);
                dy = random(-10, 10);

                x = random(0 + rad, width - rad);
        y = random(0 + rad, height - rad);
            }

            input = createInput();

            button = createButton("Submit");
            button.mousePressed(addSound);

            noStroke();
        }

该代码定义变量和添加声音的功能,并且使您按下“ m”时该代码可以播放音乐

if(keyCode === 77) {
                if(sound.isPlaying()) {
                    sound.stop();
                } else {
                    sound.play();
                }
            }

(振幅目前不执行任何操作。出于调试目的,我将其取出)

P5网站:https://p5js.org/

用于添加p5的HTML:

        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.js"></script>

在输入框中,我希望能够放置指向youtube视频的链接,并使其播放声音。

0 个答案:

没有答案