论坛 › 欢乐水吧 › 失序乐章

马黑黑 发表于 2022-7-27 07:02

失序乐章

<style>
#papa { left: -214px; width: 1024px; height: 680px; background: #ccc url('/data/attachment/forum/202207/27/070001vsafjhpg2pddjfyx.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; border-radius: 6px; position: relative; }
#mama { position: absolute; border: 1px solid #ccc; right: 20px; bottom: 20px; color: snow; font-size: 15px; }
#mama input { margin-right: 6px; display: inline; outline: none; cursor: pointer; }
</style>
<div id="papa">
        <div id="mama">
                <input id="btnstop" type="button" value="播放" />
                <input type="radio" name="wave" value="sine" checked>正弦波
                <input type="radio" name="wave" value="square">方波
                <inputtype="radio" name="wave" value="triangle">三角波
                <input type="radio" name="wave" value="sawtooth">锯齿波 &nbsp;
        </div>
</div>
<script>
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
let arFrequency = ;
let waveType = 'sine', TT;
let waves = document.getElementsByName('wave');
let audioCtx = new AudioContext();

btnstop.onclick = () => btnstop.value == '暂停' ? (clearInterval(TT), btnstop.value = '播放') : (TT = setInterval(play, 200), btnstop.value = '暂停');
Array.from(waves).forEach((item) => { item.onchange = () =>waveType = item.value; });

function mkSound(sound,type) {
        let oscillator = audioCtx.createOscillator();
        let gainNode = audioCtx.createGain();
        oscillator.connect(gainNode);
        gainNode.connect(audioCtx.destination);
        oscillator.type = waveType;
        oscillator.frequency.value = sound;
        gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
        gainNode.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 0.01);
        oscillator.start(audioCtx.currentTime);
        gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 1);
        oscillator.stop(audioCtx.currentTime + 1);
}

function play() {
        let idx = num(0, arFrequency.length - 1);
        mkSound(arFrequency, waveType);
}

</script>

加林森 发表于 2022-7-27 07:22

制作漂亮，还分了四个波段，真厉害。大赞！{:4_199:}

马黑黑 发表于 2022-7-27 07:31

本帖最后由 马黑黑 于 2022-7-27 07:33 编辑

这是没有音乐来源的“音乐”，不必去分析音乐URL，没有。但音乐会没完没了，无序而无尽。

查阅 Web Audio API 资料，参考大佬们的研究心得，鼓捣出这个无序华章。音频上下文是巨大个，说我会了那是夸张，里面的东东浩如烟海，水体无休无止，到处巨浪滔滔，取一瓢饮的想法都不敢有。

能让声卡发一定频率、一定波形的声音，然后让声音减速、停下，一切在一秒之内完成，无序“弹奏”的动作则设定更短的时间，本例是每次 0.2秒，这样连贯后的声音貌似指法娴熟、黑白琴键配合得当一样，效果直逼真人弹奏。

马黑黑 发表于 2022-7-27 07:33

加林森 发表于 2022-7-27 07:22
制作漂亮，还分了四个波段，真厉害。大赞！

我的指法如何？{:4_170:}

加林森 发表于 2022-7-27 08:05

马黑黑 发表于 2022-7-27 07:33
我的指法如何？

厉害厉害。{:5_116:}

浣溪沙 发表于 2022-7-27 08:53

俺木听到{:4_203:}

梦油 发表于 2022-7-27 10:17

哎呦！太棒了！这简直就是一种美的享受。黑黑朋友真有两下子。

                     {:4_199:}                {:4_199:}

山人 发表于 2022-7-27 10:53

浣溪沙 发表于 2022-7-27 08:53
俺木听到

手动播放，点一下播放按钮

樵歌 发表于 2022-7-27 11:37

太厉害了，太逼真了，太好玩了，太太了{:4_189:}

樵歌 发表于 2022-7-27 11:38

特别，那锯齿波，真象两一上一下在拉大锯，，，，{:4_173:}

马黑黑 发表于 2022-7-27 12:12

樵歌 发表于 2022-7-27 11:38
特别，那锯齿波，真象两一上一下在拉大锯，，，，

锯齿效果是声波中很重要的一环

马黑黑 发表于 2022-7-27 12:12

浣溪沙 发表于 2022-7-27 08:53
俺木听到

不会吧？辣么好的音乐

马黑黑 发表于 2022-7-27 12:12

樵歌 发表于 2022-7-27 11:37
太厉害了，太逼真了，太好玩了，太太了

太太在厨房吧{:4_170:}

绿叶清舟 发表于 2022-7-27 16:37

这个音色太好了

马黑黑 发表于 2022-7-27 19:00

绿叶清舟 发表于 2022-7-27 16:37
这个音色太好了

音色好不好是你电脑的音频设备问题，web audio API驱动你的设备发声

绿叶清舟 发表于 2022-7-27 19:12

马黑黑 发表于 2022-7-27 19:00
音色好不好是你电脑的音频设备问题，web audio API驱动你的设备发声

那是纯电脑发声的啊

马黑黑 发表于 2022-7-27 20:16

绿叶清舟 发表于 2022-7-27 19:12
那是纯电脑发声的啊

是的，没有音源

浣溪沙 发表于 2022-7-27 20:49

浣溪沙 发表于 2022-7-27 08:53
俺木听到

{:4_181:}现在听到了

樵歌 发表于 2022-7-27 20:55

马黑黑 发表于 2022-7-27 12:12
锯齿效果是声波中很重要的一环

我就觉得很形象{:4_173:}

樵歌 发表于 2022-7-27 20:56

马黑黑 发表于 2022-7-27 12:12
太太在厨房吧

受太太飘扬有好事了{:4_189:}

查看完整版本: 失序乐章