HTML5 奥运会火钢琴曲自动演奏

SVG 含奥运五环图和电子钢琴。

html5, piano

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2925
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<defs>
        <style>
            .cls-1 {
                fill: #3a3a3a;
            }
            .cls-2,
            .cls-9 {
                fill: #fff;
            }
            .cls-3 {
                fill: #010101;
                stroke: #010101;
            }
            .cls-10,
            .cls-4 {
                font-size: 14px;
            }
            .cls-4 {
                fill: #939393;
            }
            .cls-10,
            .cls-17,
            .cls-4,
            .cls-9 {
                font-family: Verdana-Bold, Verdana;
                font-weight: 700;
            }
            .cls-5 {
                fill: #f9a058;
            }
            .cls-6 {
                fill: #f89d56;
            }
            .cls-7 {
                fill: #f47b23;
            }
            .cls-8 {
                fill: #f36b25;
            }
            .cls-9 {
                font-size: 24px;
            }
            .cls-10 {
                fill: #ddd;
            }
            .cls-11 {
                fill: none;
            }
            .cls-11,
            .cls-12,
            .cls-13,
            .cls-14,
            .cls-15,
            .cls-16 {
                stroke: #fff;
                stroke-miterlimit: 10;
                stroke-width: 2px;
            }
            .cls-12 {
                fill: #1c79bf;
            }
            .cls-13 {
                fill: #e01c4b;
            }
            .cls-14 {
                fill: #f9a11b;
            }
            .cls-16 {
                fill: #079b49;
            }
            .cls-17 {
                font-size: 34px;
                fill: #231f20;
            }
        </style>
    </defs>
    <title>Olympic</title>
    <g id="BG">
        <rect class="cls-1" width="1100" height="800" />
    </g>
    <g id="Layer_1" data-name="Layer 1">
        <rect id="KeyC" class="cls-2" x="301.11" y="207" width="70" height="365.22" />
        <rect id="KeyD" class="cls-2" x="373.11" y="207" width="70" height="365.22" />
        <rect id="KeyE" class="cls-2" x="445.11" y="207" width="70" height="365.22" />
        <rect id="KeyF" class="cls-2" x="517.11" y="207" width="70" height="365.22" />
        <rect id="KeyG" class="cls-2" x="589.11" y="207" width="70" height="365.22" />
        <rect id="KeyA" class="cls-2" x="661.11" y="207" width="70" height="365.22" />
        <rect id="KeyB" class="cls-2" x="733.11" y="207" width="70" height="365.22" />
        <rect id="KeyCs" class="cls-3" x="350.73" y="207" width="39.57" height="243.48" />
        <rect id="KeyDs" class="cls-3" x="423.92" y="207" width="39.57" height="243.48" />
        <rect id="KeyFs" class="cls-3" x="567.43" y="207" width="39.57" height="243.48" />
        <rect id="KeyGs" class="cls-3" x="640.57" y="207" width="39.57" height="243.48" />
        <rect id="KeyAs" class="cls-3" x="717.22" y="207" width="39.57" height="243.48" />
        <text class="cls-4" transform="translate(466.46 725)">notes by: html5piano</text>
    </g>
    <g id="Logo">
        <g id="Layer_2" data-name="Layer 2">
            <g id="Layer_1-2" data-name="Layer 1-2">
                <polyline class="cls-5" points="524.68 657.39 516.86 665.37 524.68 673.04 527.44 672.27 529.75 667.21 549.85 665.37 529.75 663.53 527.44 658.31" />
                <polyline class="cls-5" points="537.57 641.89 526.52 641.89 526.52 653.09 529.13 654.32 534.35 652.33 549.85 665.37 536.8 649.56 539.11 644.35" />
                <polyline class="cls-5" points="549.85 632.07 542.17 640.05 542.94 642.96 548.16 644.96 549.85 665.37 551.69 644.96 556.9 642.96 557.83 640.05" />
                <polyline class="cls-5" points="573.48 641.89 562.27 641.89 560.89 644.35 563.04 649.56 549.85 665.37 565.8 652.33 570.87 654.32 573.48 653.09" />
                <polyline class="cls-5" points="575.32 657.39 572.4 658.31 570.41 663.53 549.85 665.37 570.41 667.21 572.4 672.27 575.32 673.04 583.14 665.37" />
                <polyline class="cls-5" points="549.85 665.37 549.85 665.37 563.04 681.02 560.89 686.08 562.27 688.69 573.48 688.69 573.48 677.64 570.87 676.26 565.8 678.41" />
                <polyline class="cls-5" points="549.85 665.37 549.85 665.37 548.16 685.62 542.94 687.77 542.17 690.53 549.85 698.36 557.83 690.53 556.9 687.77 551.69 685.62" />
                <polyline class="cls-5" points="549.85 665.37 534.35 678.41 529.13 676.26 526.52 677.64 526.52 688.69 537.57 688.69 539.11 686.08 536.8 681.02" />
                <polyline class="cls-6" points="549.85 665.37 527.44 672.27 526.37 675.04 529.13 676.26" />
                <polyline class="cls-7" points="549.85 665.37 529.75 667.21 527.44 672.27" />
                <polyline class="cls-7" points="549.85 665.37 529.13 676.26 534.35 678.41" />
                <polyline class="cls-6" points="529.13 654.32 526.37 655.39 527.44 658.31 549.85 665.37" />
                <polyline class="cls-7" points="527.44 658.31 529.75 663.53 549.85 665.37" />
                <polyline class="cls-7" points="534.35 652.33 529.13 654.32 549.85 665.37" />
                <polyline class="cls-6" points="540.18 641.74 539.11 644.35 549.85 665.37 542.94 642.96" />
                <polyline class="cls-7" points="539.11 644.35 536.8 649.56 549.85 665.37" />
                <polyline class="cls-7" points="542.94 642.96 549.85 665.37 548.16 644.96" />
                <polyline class="cls-6" points="559.82 641.74 556.9 642.96 549.85 665.37 560.89 644.35" />
                <polyline class="cls-7" points="556.9 642.96 551.69 644.96 549.85 665.37" />
                <polyline class="cls-7" points="560.89 644.35 549.85 665.37 563.04 649.56" />
                <polyline class="cls-6" points="570.87 654.32 549.85 665.37 572.4 658.31 573.63 655.39" />
                <polyline class="cls-7" points="565.8 652.33 549.85 665.37 570.87 654.32" />
                <polyline class="cls-7" points="572.4 658.31 549.85 665.37 570.41 663.53" />
                <polyline class="cls-6" points="549.85 665.37 549.85 665.37 570.87 676.26 573.63 675.04 572.4 672.27" />
                <polyline class="cls-7" points="549.85 665.37 549.85 665.37 572.4 672.27 570.41 667.21" />
                <polyline class="cls-7" points="549.85 665.37 565.8 678.41 570.87 676.26" />
                <polyline class="cls-6" points="549.85 665.37 549.85 665.37 556.9 687.77 559.82 688.85 560.89 686.08" />
                <polyline class="cls-7" points="549.85 665.37 549.85 665.37 560.89 686.08 563.04 681.02" />
                <polyline class="cls-7" points="549.85 665.37 551.69 685.62 556.9 687.77" />
                <polyline class="cls-6" points="549.85 665.37 539.11 686.08 540.18 688.85 542.94 687.77" />
                <polyline class="cls-7" points="549.85 665.37 542.94 687.77 548.16 685.62" />
                <polyline class="cls-7" points="549.85 665.37 549.85 665.37 536.8 681.02 539.11 686.08" />
                <polyline class="cls-2" points="535.73 669.82 531.59 665.37 535.73 660.92 549.85 665.37" />
                <polyline class="cls-2" points="536.8 658.31 536.8 652.17 543.1 652.17 549.85 665.37" />
                <polyline class="cls-2" points="545.55 651.25 549.85 646.8 554.3 651.25 549.85 665.37" />
                <polyline class="cls-2" points="556.9 652.17 563.2 652.17 563.2 658.31 549.85 665.37" />
                <polyline class="cls-2" points="564.12 660.92 568.57 665.37 564.12 669.82 549.85 665.37" />
                <polyline class="cls-2" points="563.2 672.12 563.2 678.41 556.9 678.41 549.85 665.37" />
                <polyline class="cls-2" points="554.3 679.49 549.85 683.78 545.55 679.49 549.85 665.37" />
                <polyline class="cls-2" points="543.1 678.41 536.8 678.41 536.8 672.12 549.85 665.37" />
                <path class="cls-2" d="M558.13,665.32a8.13,8.13,0,1,1-8.29-8.29,8.22,8.22,0,0,1,8.29,8.16v.13" />
                <path class="cls-8" d="M556.29,665.32a6.25,6.25,0,0,1-6.21,6.29h-.18a6.39,6.39,0,1,1,0-12.79h0a6.29,6.29,0,0,1,6.39,6.19v.21" />
            </g>
        </g>
    </g>
    <g id="Text">
        <text class="cls-9" transform="translate(384.36 174.57)">THIS IS SVG, ONLY SVG!</text>
        <text class="cls-10" transform="translate(457.92 617)">SVG Demo by Lee Gunn</text>
    </g>
    <g id="Rings">
        <g id="Rings-2" data-name="Rings">
            <path class="cls-11" d="M533.27,55.32a17.39,17.39,0,0,0,8.64,10.74A17.39,17.39,0,0,0,533.27,55.32Z" />
            <path class="cls-11" d="M550,33.35A17.36,17.36,0,0,0,532.75,48.8,23.16,23.16,0,0,1,548.15,68a17.31,17.31,0,0,0,3.7,0,23.16,23.16,0,0,1,15.4-19.16A17.36,17.36,0,0,0,550,33.35Z" />
            <path class="cls-11" d="M500.34,33.35a17.36,17.36,0,0,0,0,34.72,17.54,17.54,0,0,0,1.85-.1,23.16,23.16,0,0,1,15.4-19.16A17.36,17.36,0,0,0,500.34,33.35Z" />
            <path class="cls-11" d="M597.81,68a17.54,17.54,0,0,0,1.85.1A17.36,17.36,0,1,0,582.41,48.8,23.16,23.16,0,0,1,597.81,68Z" />
            <path class="cls-11" d="M517.07,55.32a17.39,17.39,0,0,0-8.64,10.74A17.39,17.39,0,0,0,517.07,55.32Z" />
            <path class="cls-11" d="M527,53.41a17.31,17.31,0,0,0-3.7,0,23.16,23.16,0,0,1-15.4,19.16,17.36,17.36,0,0,0,34.5,0A23.16,23.16,0,0,1,527,53.41Z" />
            <path class="cls-11" d="M573,53.41a23.16,23.16,0,0,1-15.4,19.16,17.36,17.36,0,0,0,34.5,0,23.16,23.16,0,0,1-15.4-19.16,17.31,17.31,0,0,0-3.7,0Z" />
            <path class="cls-11" d="M582.93,55.32a17.39,17.39,0,0,0,8.64,10.74A17.39,17.39,0,0,0,582.93,55.32Z" />
            <path class="cls-11" d="M566.73,55.32a17.39,17.39,0,0,0-8.64,10.74A17.39,17.39,0,0,0,566.73,55.32Z" />
            <path class="cls-12" d="M502.19,68a17.54,17.54,0,0,1-1.85.1A17.36,17.36,0,1,1,517.59,48.8a17.35,17.35,0,0,1-9.16,17.25,17.29,17.29,0,0,0-.52,6.51,23.14,23.14,0,1,0-7.58,1.28c.64,0,1.27,0,1.9-.08a22.64,22.64,0,0,1,0-5.8Z" />
            <path class="cls-13" d="M599.66,27.56a23.14,23.14,0,0,0-22.93,20.05,23,23,0,0,1,5.68,1.19,17.36,17.36,0,1,1,17.25,19.26,17.54,17.54,0,0,1-1.85-.1,17.36,17.36,0,0,1-14.88-12.65,17.24,17.24,0,0,0-6.25-1.91,23.11,23.11,0,0,0,21.08,20.35c.63.05,1.26.08,1.9.08a23.14,23.14,0,0,0,0-46.29Z"
            />
            <path class="cls-14" d="M525.17,88a17.36,17.36,0,0,1-8.1-32.71,17.29,17.29,0,0,0,.52-6.51,23.14,23.14,0,1,0,30.51,25,23,23,0,0,1-5.68-1.19A17.36,17.36,0,0,1,525.17,88Z" />
            <path class="cls-14" d="M523.32,53.41a17.31,17.31,0,0,1,3.7,0A17.36,17.36,0,0,1,541.9,66.06,17.24,17.24,0,0,0,548.15,68a23.11,23.11,0,0,0-21.08-20.35c-.63-.05-1.26-.08-1.9-.08s-1.27,0-1.9.08a22.64,22.64,0,0,1,0,5.8Z" />
            <path class="cls-15" d="M551.69,70.67a23.35,23.35,0,0,1,.16-2.71,17.31,17.31,0,0,1-3.7,0,17.36,17.36,0,0,1-14.88-12.65A17.24,17.24,0,0,0,527,53.41,23.11,23.11,0,0,0,548.1,73.76c.63.05,1.26.08,1.9.08s1.27,0,1.9-.08A23.32,23.32,0,0,1,551.69,70.67Z" />
            <path class="cls-16" d="M573,53.41a17.31,17.31,0,0,1,3.7,0,17.36,17.36,0,0,1,14.88,12.65A17.24,17.24,0,0,0,597.81,68a23.11,23.11,0,0,0-21.08-20.35c-.63-.05-1.26-.08-1.9-.08s-1.27,0-1.9.08a22.64,22.64,0,0,1,0,5.8Z" />
            <path class="cls-16" d="M574.83,88a17.36,17.36,0,0,1-8.1-32.71,17.29,17.29,0,0,0,.52-6.51,23.14,23.14,0,1,0,30.51,25,23,23,0,0,1-5.68-1.19A17.36,17.36,0,0,1,574.83,88Z" />
            <path class="cls-15" d="M572.93,47.61a23.14,23.14,0,0,0-45.86,0,23,23,0,0,1,5.68,1.19,17.36,17.36,0,0,1,34.5,0,17.35,17.35,0,0,1-9.16,17.25,17.29,17.29,0,0,0-.52,6.51,23.1,23.1,0,0,0,15.35-25Z" />
        </g>
    </g>
    <g id="Letters">
        <text class="cls-17" transform="translate(321.11 554.02)">C</text>
        <text class="cls-17" transform="translate(393.88 554.02)">D</text>
        <text class="cls-17" transform="translate(469.58 554.02)">E</text>
        <text class="cls-17" transform="translate(541.61 554.02)">F</text>
        <text class="cls-17" transform="translate(608.88 554.02)">G</text>
        <text class="cls-17" transform="translate(683.13 554.02)">A</text>
        <text class="cls-17" transform="translate(751.88 554.02)">B</text>
    </g>

var colours = ["#007AC9", "#FFA100", "#009B3A", "#E10E49"];
        var keys = ["C", "Cs", "D", "Ds", "E", "F", "Fs", "G", "Gs", "A", "As", "B"];

for (var i = 0; i < keys.length; i++) {
            (function(note) {
                $("#Key" + note).onclick = function() {
                    playAudio(note);
                };
            })(keys[i]);
        }

function playAudio(note) {
            console.log(note);
            var audio = $('#Audio' + note);

audio.pause();
            audio.currentTime = 0;
            audio.play();

resetKeys();

$("#Key" + note).style.fill = colours[currentColour % colours.length];

currentColour++;
        }

function resetKeys() {
            for (var i = 0; i < keys.length; i++) {
                $("#Key" + keys[i]).style.fill = keys[i].length == 1 ? "#FFFFFF" : "#000000";
            }
        }

var notes = [{
                n: 'C',
                t: 1000
            }, {
                n: 'F',
                t: 600
            }, {
                n: 'G',
                t: 350
            }, {
                n: 'A',
                t: 350
            }, {
                n: 'G',
                t: 350
            }, {
                n: 'E',
                t: 700
            },

{
                n: 'C',
                t: 1000
            }, {
                n: 'F',
                t: 600
            }, {
                n: 'G',
                t: 350
            }, {
                n: 'A',
                t: 350
            }, {
                n: 'G',
                t: 350
            },

{
                n: 'C',
                t: 2000
            }, {
                n: 'F',
                t: 600
            }, {
                n: 'G',
                t: 350
            }, {
                n: 'A',
                t: 350
            }, {
                n: 'G',
                t: 350
            }, {
                n: 'E',
                t: 700
            },

{
                n: 'E',
                t: 1400
            }, {
                n: 'F',
                t: 550
            }, {
                n: 'E',
                t: 350
            }, {
                n: 'C',
                t: 350
            }, {
                n: 'C',
                t: 350
            }
        ];

var current = 0;
        var currentColour = 0;
        var speed = 0.75;

function playNote(note, time) {
            setTimeout(function() {
                playAudio(note);

current++;

if (current < notes.length)
                    playNote(notes[current].n, notes[current].t);
            }, time * speed);

}

// Let's play...
        playNote(notes[current].n, notes[current].t);

// ]]>
    </script>

SVG 含奥运五环图和电子钢琴。

html5, piano

编辑器支持Emmet

快捷键

SVG 含奥运五环图和电子钢琴。

html5, piano

HTML5 SVG奥运圣火 | 体育人文精神薪火相传

HTML5 迷你电子钢琴 | 在线作曲

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：