pxt-core 8.4.2 → 8.4.3

package/built/pxtblocks.js

@@ -2401,6 +2401,7 @@ var pxt;
             registerFieldEditor('melody', pxtblockly.FieldCustomMelody);
             registerFieldEditor('soundeffect', pxtblockly.FieldSoundEffect);
             registerFieldEditor('autocomplete', pxtblockly.FieldAutoComplete);
+            registerFieldEditor('musiceditor', pxtblockly.FieldMusicEditor);
         }
         blocks.initFieldEditors = initFieldEditors;
         function registerFieldEditor(selector, field, validator) {
@@ -8022,50 +8023,159 @@ var pxtblockly;
                     const project = pxt.react.getTilemapProject();
                     pxt.sprite.addMissingTilemapTilesAndReferences(project, this.asset);
                     break;
+                case "song" /* pxt.AssetType.Song */:
+                    editorKind = "music-editor";
+                    params.temporaryAssets = pxtblockly.getTemporaryAssets(this.sourceBlock_.workspace, "song" /* pxt.AssetType.Song */);
+                    pxtblockly.setMelodyEditorOpen(this.sourceBlock_, true);
+                    break;
+            }
+            if (this.isFullscreen()) {
+                this.showEditorFullscreen(editorKind, params);
+            }
+            else {
+                this.showEditorInWidgetDiv(editorKind, params);
             }
+        }
+        showEditorFullscreen(editorKind, params) {
             const fv = pxt.react.getFieldEditorView(editorKind, this.asset, params);
             if (this.undoRedoState) {
                 fv.restorePersistentData(this.undoRedoState);
             }
             pxt.react.getTilemapProject().pushUndo();
             fv.onHide(() => {
-                var _a;
-                const result = fv.getResult();
-                const project = pxt.react.getTilemapProject();
-                if (result) {
-                    const old = this.getValue();
-                    if (pxt.assetEquals(this.asset, result))
-                        return;
-                    const oldId = isTemporaryAsset(this.asset) ? null : this.asset.id;
-                    let newId = isTemporaryAsset(result) ? null : result.id;
-                    if (!oldId && newId === this.sourceBlock_.id) {
-                        // The temporary assets we create just use the block id as the id; give it something
-                        // a little nicer
-                        result.id = project.generateNewID(result.type);
-                        newId = result.id;
-                    }
-                    this.pendingEdit = true;
-                    if ((_a = result.meta) === null || _a === void 0 ? void 0 : _a.displayName)
-                        this.disposeOfTemporaryAsset();
-                    this.asset = result;
-                    const lastRevision = project.revision();
-                    this.onEditorClose(this.asset);
-                    this.updateAssetListener();
-                    this.updateAssetMeta();
-                    this.redrawPreview();
-                    this.undoRedoState = fv.getPersistentData();
-                    if (this.sourceBlock_ && Blockly.Events.isEnabled()) {
-                        const event = new BlocklyTilemapChange(this.sourceBlock_, 'field', this.name, old, this.getValue(), lastRevision, project.revision());
-                        if (oldId !== newId) {
-                            event.oldAssetId = oldId;
-                            event.newAssetId = newId;
-                        }
-                        Blockly.Events.fire(event);
+                this.onFieldEditorHide(fv);
+            });
+            fv.show();
+        }
+        showEditorInWidgetDiv(editorKind, params) {
+            let bbox;
+            // This is due to the changes in https://github.com/microsoft/pxt-blockly/pull/289
+            // which caused the widgetdiv to jump around if any fields underneath changed size
+            let widgetOwner = {
+                getScaledBBox: () => bbox
+            };
+            Blockly.WidgetDiv.show(widgetOwner, this.sourceBlock_.RTL, () => {
+                if (document.activeElement && document.activeElement.tagName === "INPUT")
+                    document.activeElement.blur();
+                fv.hide();
+                widgetDiv.classList.remove("sound-effect-editor-widget");
+                widgetDiv.style.transform = "";
+                widgetDiv.style.position = "";
+                widgetDiv.style.left = "";
+                widgetDiv.style.top = "";
+                widgetDiv.style.width = "";
+                widgetDiv.style.height = "";
+                widgetDiv.style.opacity = "";
+                widgetDiv.style.transition = "";
+                widgetDiv.style.alignItems = "";
+                this.onFieldEditorHide(fv);
+            });
+            const widgetDiv = Blockly.WidgetDiv.DIV;
+            const fv = pxt.react.getFieldEditorView(editorKind, this.asset, params, widgetDiv);
+            const block = this.sourceBlock_;
+            const bounds = block.getBoundingRectangle();
+            const coord = pxtblockly.workspaceToScreenCoordinates(block.workspace, new Blockly.utils.Coordinate(bounds.right, bounds.top));
+            const animationDistance = 20;
+            const left = coord.x - 400;
+            const top = coord.y + 60 - animationDistance;
+            widgetDiv.style.opacity = "0";
+            widgetDiv.classList.add("sound-effect-editor-widget");
+            widgetDiv.style.position = "absolute";
+            widgetDiv.style.left = left + "px";
+            widgetDiv.style.top = top + "px";
+            widgetDiv.style.width = "50rem";
+            widgetDiv.style.height = "34.25rem";
+            widgetDiv.style.display = "flex";
+            widgetDiv.style.alignItems = "center";
+            widgetDiv.style.transition = "transform 0.25s ease 0s, opacity 0.25s ease 0s";
+            widgetDiv.style.borderRadius = "";
+            fv.onHide(() => {
+                Blockly.WidgetDiv.hideIfOwner(widgetOwner);
+            });
+            fv.show();
+            const divBounds = widgetDiv.getBoundingClientRect();
+            const injectDivBounds = block.workspace.getInjectionDiv().getBoundingClientRect();
+            if (divBounds.height > injectDivBounds.height) {
+                widgetDiv.style.height = "";
+                widgetDiv.style.top = `calc(1rem - ${animationDistance}px)`;
+                widgetDiv.style.bottom = `calc(1rem + ${animationDistance}px)`;
+            }
+            else {
+                if (divBounds.bottom > injectDivBounds.bottom || divBounds.top < injectDivBounds.top) {
+                    // This editor is pretty tall, so just center vertically on the inject div
+                    widgetDiv.style.top = (injectDivBounds.top + (injectDivBounds.height / 2) - (divBounds.height / 2)) - animationDistance + "px";
+                }
+            }
+            const toolboxWidth = block.workspace.getToolbox().getWidth();
+            const workspaceLeft = injectDivBounds.left + toolboxWidth;
+            if (divBounds.width > injectDivBounds.width - toolboxWidth) {
+                widgetDiv.style.width = "";
+                widgetDiv.style.left = "1rem";
+                widgetDiv.style.right = "1rem";
+            }
+            else {
+                // Check to see if we are bleeding off the right side of the canvas
+                if (divBounds.left + divBounds.width >= injectDivBounds.right) {
+                    // If so, try and place to the left of the block instead of the right
+                    const blockLeft = pxtblockly.workspaceToScreenCoordinates(block.workspace, new Blockly.utils.Coordinate(bounds.left, bounds.top));
+                    if (blockLeft.x - divBounds.width - 20 > workspaceLeft) {
+                        widgetDiv.style.left = (blockLeft.x - divBounds.width - 20) + "px";
                     }
-                    this.pendingEdit = false;
+                    else {
+                        // As a last resort, just center on the inject div
+                        widgetDiv.style.left = (workspaceLeft + ((injectDivBounds.width - toolboxWidth) / 2) - divBounds.width / 2) + "px";
+                    }
+                }
+                else if (divBounds.left < injectDivBounds.left) {
+                    widgetDiv.style.left = workspaceLeft + "px";
                 }
+            }
+            const finalDimensions = widgetDiv.getBoundingClientRect();
+            bbox = new Blockly.utils.Rect(finalDimensions.top, finalDimensions.bottom, finalDimensions.left, finalDimensions.right);
+            requestAnimationFrame(() => {
+                widgetDiv.style.opacity = "1";
+                widgetDiv.style.transform = `translateY(${animationDistance}px)`;
             });
-            fv.show();
+        }
+        onFieldEditorHide(fv) {
+            var _a;
+            const result = fv.getResult();
+            const project = pxt.react.getTilemapProject();
+            if (this.asset.type === "song" /* pxt.AssetType.Song */) {
+                pxtblockly.setMelodyEditorOpen(this.sourceBlock_, false);
+            }
+            if (result) {
+                const old = this.getValue();
+                if (pxt.assetEquals(this.asset, result))
+                    return;
+                const oldId = isTemporaryAsset(this.asset) ? null : this.asset.id;
+                let newId = isTemporaryAsset(result) ? null : result.id;
+                if (!oldId && newId === this.sourceBlock_.id) {
+                    // The temporary assets we create just use the block id as the id; give it something
+                    // a little nicer
+                    result.id = project.generateNewID(result.type);
+                    newId = result.id;
+                }
+                this.pendingEdit = true;
+                if ((_a = result.meta) === null || _a === void 0 ? void 0 : _a.displayName)
+                    this.disposeOfTemporaryAsset();
+                this.asset = result;
+                const lastRevision = project.revision();
+                this.onEditorClose(this.asset);
+                this.updateAssetListener();
+                this.updateAssetMeta();
+                this.redrawPreview();
+                this.undoRedoState = fv.getPersistentData();
+                if (this.sourceBlock_ && Blockly.Events.isEnabled()) {
+                    const event = new BlocklyTilemapChange(this.sourceBlock_, 'field', this.name, old, this.getValue(), lastRevision, project.revision());
+                    if (oldId !== newId) {
+                        event.oldAssetId = oldId;
+                        event.newAssetId = newId;
+                    }
+                    Blockly.Events.fire(event);
+                }
+                this.pendingEdit = false;
+            }
         }
         render_() {
             if (this.isGreyBlock && !this.textElement_) {
@@ -8163,12 +8273,17 @@ var pxtblockly;
                     case "tilemap" /* pxt.AssetType.Tilemap */:
                         dataURI = pxtblockly.tilemapToImageURI(this.asset.data, PREVIEW_WIDTH, this.lightMode);
                         break;
+                    case "song" /* pxt.AssetType.Song */:
+                        dataURI = pxtblockly.songToDataURI(this.asset.song, 60, 20, this.lightMode);
+                        break;
+                }
+                if (dataURI) {
+                    const img = new svg.Image()
+                        .src(dataURI)
+                        .at(X_PADDING + BG_PADDING, Y_PADDING + BG_PADDING)
+                        .size(PREVIEW_WIDTH, PREVIEW_WIDTH);
+                    this.fieldGroup_.appendChild(img.el);
                 }
-                const img = new svg.Image()
-                    .src(dataURI)
-                    .at(X_PADDING + BG_PADDING, Y_PADDING + BG_PADDING)
-                    .size(PREVIEW_WIDTH, PREVIEW_WIDTH);
-                this.fieldGroup_.appendChild(img.el);
             }
         }
         parseValueText(newText) {
@@ -8259,6 +8374,9 @@ var pxtblockly;
                 pxt.react.getTilemapProject().addChangeListener(this.asset, this.assetChangeListener);
             }
         }
+        isFullscreen() {
+            return true;
+        }
     }
     pxtblockly.FieldAssetEditor = FieldAssetEditor;
     function isTemporaryAsset(asset) {
@@ -10325,13 +10443,13 @@ var pxtblockly;
             this.prevString = this.getValue();
             // The webapp listens to this event and stops the simulator so that you don't get the melody
             // playing twice (once in the editor and once when the code runs in the sim)
-            Blockly.Events.fire(new Blockly.Events.Ui(this.sourceBlock_, "melody-editor", false, true));
+            pxtblockly.setMelodyEditorOpen(this.sourceBlock_, true);
             Blockly.DropDownDiv.showPositionedByBlock(this, this.sourceBlock_, () => {
                 this.onEditorClose();
                 // revert all style attributes for dropdown div
                 pxt.BrowserUtils.removeClass(contentDiv, "melody-content-div");
                 pxt.BrowserUtils.removeClass(contentDiv.parentElement, "melody-editor-dropdown");
-                Blockly.Events.fire(new Blockly.Events.Ui(this.sourceBlock_, "melody-editor", true, false));
+                pxtblockly.setMelodyEditorOpen(this.sourceBlock_, false);
             });
         }
         getValue() {
@@ -10999,6 +11117,116 @@ var pxtblockly;
         return "#DCDCDC";
     }
 })(pxtblockly || (pxtblockly = {}));
+/// <reference path="../../built/pxtlib.d.ts" />
+/// <reference path="./field_asset.ts" />
+var pxtblockly;
+(function (pxtblockly) {
+    var svg = pxt.svgUtil;
+    const PREVIEW_HEIGHT = 32;
+    const X_PADDING = 5;
+    const Y_PADDING = 1;
+    const BG_PADDING = 4;
+    const BG_HEIGHT = BG_PADDING * 2 + PREVIEW_HEIGHT;
+    const TOTAL_HEIGHT = Y_PADDING * 2 + BG_PADDING * 2 + PREVIEW_HEIGHT;
+    class FieldMusicEditor extends pxtblockly.FieldAssetEditor {
+        getAssetType() {
+            return "song" /* pxt.AssetType.Song */;
+        }
+        createNewAsset(text) {
+            const project = pxt.react.getTilemapProject();
+            if (text) {
+                const asset = pxt.lookupProjectAssetByTSReference(text, project);
+                if (asset)
+                    return asset;
+            }
+            if (this.getBlockData()) {
+                return project.lookupAsset("song" /* pxt.AssetType.Song */, this.getBlockData());
+            }
+            let song;
+            if (text) {
+                const match = /^\s*hex\s*`([a-fA-F0-9]+)`\s*(?:;?)\s*$/.exec(text);
+                if (match) {
+                    song = pxt.assets.music.decodeSongFromHex(match[1]);
+                }
+            }
+            else {
+                song = pxt.assets.music.getEmptySong(2);
+            }
+            if (!song) {
+                this.isGreyBlock = true;
+                this.valueText = text;
+                return undefined;
+            }
+            else {
+                // Restore all of the unused tracks
+                pxt.assets.music.inflateSong(song);
+            }
+            const newAsset = {
+                internalID: -1,
+                id: this.sourceBlock_.id,
+                type: "song" /* pxt.AssetType.Song */,
+                meta: {},
+                song
+            };
+            return newAsset;
+        }
+        render_() {
+            super.render_();
+            if (!this.isGreyBlock) {
+                this.size_.height = TOTAL_HEIGHT;
+                this.size_.width = X_PADDING * 2 + BG_PADDING * 2 + this.previewWidth();
+            }
+        }
+        getValueText() {
+            if (this.asset && !this.isTemporaryAsset()) {
+                return pxt.getTSReferenceForAsset(this.asset);
+            }
+            return this.asset ? `hex\`${pxt.assets.music.encodeSongToHex(this.asset.song)}\`` : "";
+        }
+        parseFieldOptions(opts) {
+            return {};
+        }
+        isFullscreen() {
+            return false;
+        }
+        redrawPreview() {
+            var _a;
+            if (!this.fieldGroup_)
+                return;
+            pxsim.U.clear(this.fieldGroup_);
+            if (this.isGreyBlock) {
+                super.redrawPreview();
+                return;
+            }
+            const totalWidth = X_PADDING * 2 + BG_PADDING * 2 + this.previewWidth();
+            const bg = new svg.Rect()
+                .at(X_PADDING, Y_PADDING)
+                .size(BG_PADDING * 2 + this.previewWidth(), BG_HEIGHT)
+                .setClass("blocklySpriteField")
+                .stroke("#898989", 1)
+                .corner(4);
+            this.fieldGroup_.appendChild(bg.el);
+            if (this.asset) {
+                const dataURI = pxtblockly.songToDataURI(this.asset.song, this.previewWidth(), PREVIEW_HEIGHT, this.lightMode);
+                if (dataURI) {
+                    const img = new svg.Image()
+                        .src(dataURI)
+                        .at(X_PADDING + BG_PADDING, Y_PADDING + BG_PADDING)
+                        .size(this.previewWidth(), PREVIEW_HEIGHT);
+                    this.fieldGroup_.appendChild(img.el);
+                }
+            }
+            if (((_a = this.size_) === null || _a === void 0 ? void 0 : _a.width) != totalWidth) {
+                this.forceRerender();
+            }
+        }
+        previewWidth() {
+            const measures = this.asset ? this.asset.song.measures : 2;
+            return measures * PREVIEW_HEIGHT;
+        }
+    }
+    pxtblockly.FieldMusicEditor = FieldMusicEditor;
+})(pxtblockly || (pxtblockly = {}));
 /// <reference path="../../localtypings/pxtblockly.d.ts" />
 var pxtblockly;
 (function (pxtblockly) {
@@ -13534,6 +13762,54 @@ var pxtblockly;
         return canvas.toDataURL();
     }
     pxtblockly.tilemapToImageURI = tilemapToImageURI;
+    function songToDataURI(song, width, height, lightMode, maxMeasures) {
+        const colors = pxt.appTarget.runtime.palette.slice();
+        const canvas = document.createElement("canvas");
+        canvas.width = width;
+        canvas.height = height;
+        let context;
+        if (lightMode) {
+            context = canvas.getContext("2d", { alpha: false });
+            context.fillStyle = "#dedede";
+            context.fillRect(0, 0, width, height);
+        }
+        else {
+            context = canvas.getContext("2d");
+        }
+        const trackColors = [
+            5,
+            11,
+            5,
+            4,
+            2,
+            6,
+            14,
+            2,
+            5,
+            1, // explosion
+        ];
+        maxMeasures = maxMeasures || song.measures;
+        const cellWidth = Math.max(Math.floor(width / (song.beatsPerMeasure * maxMeasures * 2)), 1);
+        const cellsShown = Math.floor(width / cellWidth);
+        const cellHeight = Math.max(Math.floor(height / 12), 1);
+        const notesShown = Math.floor(height / cellHeight);
+        for (const track of song.tracks) {
+            for (const noteEvent of track.notes) {
+                const col = Math.floor(noteEvent.startTick / (song.ticksPerBeat / 2));
+                if (col > cellsShown)
+                    break;
+                for (const note of noteEvent.notes) {
+                    const row = 12 - (note % 12);
+                    if (row > notesShown)
+                        continue;
+                    context.fillStyle = colors[trackColors[track.id || song.tracks.indexOf(track)]];
+                    context.fillRect(col * cellWidth, row * cellHeight, cellWidth, cellHeight);
+                }
+            }
+        }
+        return canvas.toDataURL();
+    }
+    pxtblockly.songToDataURI = songToDataURI;
     function deleteTilesetTileIfExists(ws, tile) {
         const existing = ws.getVariablesOfType(pxt.sprite.BLOCKLY_TILESET_TYPE);
         for (const model of existing) {
@@ -13669,10 +13945,17 @@ var pxtblockly;
             case "animation" /* pxt.AssetType.Animation */:
                 return getAllFields(workspace, field => field instanceof pxtblockly.FieldAnimationEditor && field.isTemporaryAsset())
                     .map(f => f.ref.getAsset());
+            case "song" /* pxt.AssetType.Song */:
+                return getAllFields(workspace, field => field instanceof pxtblockly.FieldMusicEditor && field.isTemporaryAsset())
+                    .map(f => f.ref.getAsset());
             default: return [];
         }
     }
     pxtblockly.getTemporaryAssets = getTemporaryAssets;
+    function setMelodyEditorOpen(block, isOpen) {
+        Blockly.Events.fire(new Blockly.Events.Ui(block, "melody-editor", !isOpen, isOpen));
+    }
+    pxtblockly.setMelodyEditorOpen = setMelodyEditorOpen;
     function workspaceToScreenCoordinates(ws, wsCoordinates) {
         // The position in pixels relative to the origin of the
         // main workspace.

package/built/pxtlib.d.ts

@@ -99,6 +99,7 @@ declare namespace pxt.auth {
         protected abstract onProfileDeleted(userId: string): Promise<void>;
         protected abstract onApiError(err: any): Promise<void>;
         protected abstract onStateCleared(): Promise<void>;
+        authTokenAsync(): Promise<string>;
         /**
          * Starts the process of authenticating the user against the given identity
          * provider. Upon success the backend will write an http-only session cookie
@@ -177,6 +178,7 @@ declare namespace pxt.auth {
     function hasIdentity(): boolean;
     function enableAuth(enabled?: boolean): void;
     function userName(user: pxt.auth.UserProfile): string;
+    function firstName(user: pxt.auth.UserProfile): string;
     function userInitials(user: pxt.auth.UserProfile): string;
     function generateUserProfilePicDataUrl(profile: pxt.auth.UserProfile): void;
     /**
@@ -554,6 +556,7 @@ declare namespace pxt {
         asseteditorUrl?: string;
         skillmapUrl?: string;
         authcodeUrl?: string;
+        multiplayerUrl?: string;
         isStatic?: boolean;
         verprefix?: string;
     }
@@ -1613,6 +1616,8 @@ declare namespace pxt.sprite {
     const IMAGE_PREFIX = "image";
     const ANIMATION_NAMESPACE = "myAnimations";
     const ANIMATION_PREFIX = "anim";
+    const SONG_NAMESPACE = "mySongs";
+    const SONG_PREFIX = "song";
     interface Coord {
         x: number;
         y: number;
@@ -1764,6 +1769,66 @@ declare namespace pxt.storage.shared {
     function setAsync(container: string, key: string, val: any): Promise<void>;
     function delAsync(container: string, key: string): Promise<void>;
 }
+declare namespace pxt.assets.music {
+    interface Instrument {
+        waveform: number;
+        ampEnvelope: Envelope;
+        pitchEnvelope?: Envelope;
+        ampLFO?: LFO;
+        pitchLFO?: LFO;
+        octave?: number;
+    }
+    interface Envelope {
+        attack: number;
+        decay: number;
+        sustain: number;
+        release: number;
+        amplitude: number;
+    }
+    interface LFO {
+        frequency: number;
+        amplitude: number;
+    }
+    interface Song {
+        measures: number;
+        beatsPerMeasure: number;
+        beatsPerMinute: number;
+        ticksPerBeat: number;
+        tracks: Track[];
+    }
+    interface Track {
+        instrument: Instrument;
+        id: number;
+        name?: string;
+        iconURI?: string;
+        drums?: DrumInstrument[];
+        notes: NoteEvent[];
+    }
+    interface NoteEvent {
+        notes: number[];
+        startTick: number;
+        endTick: number;
+    }
+    interface DrumSoundStep {
+        waveform: number;
+        frequency: number;
+        volume: number;
+        duration: number;
+    }
+    interface DrumInstrument {
+        startFrequency: number;
+        startVolume: number;
+        steps: DrumSoundStep[];
+    }
+    function renderInstrument(instrument: Instrument, noteFrequency: number, gateLength: number, volume: number): Uint8Array;
+    function renderDrumInstrument(sound: DrumInstrument, volume: number): Uint8Array;
+    function encodeSongToHex(song: Song): string;
+    function decodeSongFromHex(hex: string): Song;
+    function cloneSong(song: Song): Song;
+    function songEquals(a: Song, b: Song): boolean;
+    function inflateSong(song: pxt.assets.music.Song): void;
+    function getEmptySong(measures: number): pxt.assets.music.Song;
+}
 declare namespace pxt {
     class Package {
         id: string;
@@ -2607,11 +2672,13 @@ declare namespace pxt {
     export const IMAGE_MIME_TYPE = "image/x-mkcd-f4";
     export const TILEMAP_MIME_TYPE = "application/mkcd-tilemap";
     export const ANIMATION_MIME_TYPE = "application/mkcd-animation";
+    export const SONG_MIME_TYPE = "application/mkcd-song";
     export const enum AssetType {
         Image = "image",
         Tile = "tile",
         Tilemap = "tilemap",
-        Animation = "animation"
+        Animation = "animation",
+        Song = "song"
     }
     export interface AssetMetadata {
         displayName?: string;
@@ -2623,7 +2690,7 @@ declare namespace pxt {
         blockId: string;
         fieldName: string;
     }
-    export type Asset = ProjectImage | Tile | Animation | ProjectTilemap;
+    export type Asset = ProjectImage | Tile | Animation | ProjectTilemap | Song;
     export interface BaseAsset {
         internalID: number;
         id: string;
@@ -2661,6 +2728,10 @@ declare namespace pxt {
         type: AssetType.Tilemap;
         data: pxt.sprite.TilemapData;
     }
+    export interface Song extends BaseAsset {
+        type: AssetType.Song;
+        song: assets.music.Song;
+    }
     export interface TilemapSnapshot {
         revision: number;
         projectTilemaps?: ProjectTilemap[];
@@ -2674,6 +2745,7 @@ declare namespace pxt {
         tilemaps: AssetCollection<ProjectTilemap>;
         images: AssetCollection<ProjectImage>;
         animations: AssetCollection<Animation>;
+        songs: AssetCollection<Song>;
     }
     interface AssetSnapshotDiff {
         beforeRevision: number;
@@ -2682,6 +2754,7 @@ declare namespace pxt {
         tilemaps: AssetCollectionDiff<ProjectTilemap>;
         images: AssetCollectionDiff<ProjectImage>;
         animations: AssetCollectionDiff<Animation>;
+        songs: AssetCollectionDiff<Song>;
     }
     interface AssetUpdateListener {
         internalID: number;
@@ -2734,6 +2807,7 @@ declare namespace pxt {
         getProjectTiles(tileWidth: number, createIfMissing: boolean): TileSet | null;
         createNewTile(data: pxt.sprite.BitmapData, id?: string, displayName?: string): Tile;
         createNewProjectImage(data: pxt.sprite.BitmapData, displayName?: string): ProjectImage;
+        createNewSong(data: pxt.assets.music.Song, displayName?: string): Song;
         updateTile(tile: pxt.Tile): Tile;
         deleteTile(id: string): void;
         getProjectTilesetJRes(): Map<any>;
@@ -2775,6 +2849,10 @@ declare namespace pxt {
          * assets.animation`shortId`
          * assets.animation`displayName`
          *
+         * SONGS:
+         * assets.song`shortId`
+         * assets.song`displayName`
+         *
          * TILEMAPS:
          * tilemap`shortId`
          *
@@ -2787,36 +2865,43 @@ declare namespace pxt {
         lookupAsset(assetType: AssetType.Tile, name: string): Tile;
         lookupAsset(assetType: AssetType.Tilemap, name: string): ProjectTilemap;
         lookupAsset(assetType: AssetType.Animation, name: string): Animation;
+        lookupAsset(assetType: AssetType.Song, name: string): Song;
         lookupAsset(assetType: AssetType, name: string): Asset;
         lookupAssetByName(assetType: AssetType.Image, name: string): ProjectImage;
         lookupAssetByName(assetType: AssetType.Tile, name: string): Tile;
         lookupAssetByName(assetType: AssetType.Tilemap, name: string): ProjectTilemap;
         lookupAssetByName(assetType: AssetType.Animation, name: string): Animation;
+        lookupAssetByName(assetType: AssetType.Song, name: string): Song;
         lookupAssetByName(assetType: AssetType, name: string): Asset;
         getAssets(type: AssetType.Image): ProjectImage[];
         getAssets(type: AssetType.Tile): Tile[];
         getAssets(type: AssetType.Tilemap): ProjectTilemap[];
         getAssets(type: AssetType.Animation): Animation[];
+        getAssets(type: AssetType.Song): Song[];
         getAssets(type: AssetType): Asset[];
         getGalleryAssets(type: AssetType.Image): ProjectImage[];
         getGalleryAssets(type: AssetType.Tile): Tile[];
         getGalleryAssets(type: AssetType.Tilemap): ProjectTilemap[];
         getGalleryAssets(type: AssetType.Animation): Animation[];
+        getGalleryAssets(type: AssetType.Song): Song[];
         getGalleryAssets(type: AssetType): Asset[];
         lookupBlockAsset(assetType: AssetType.Image, blockID: string): ProjectImage;
         lookupBlockAsset(assetType: AssetType.Tile, blockID: string): Tile;
         lookupBlockAsset(assetType: AssetType.Tilemap, blockID: string): ProjectTilemap;
         lookupBlockAsset(assetType: AssetType.Animation, blockID: string): Animation;
+        lookupBlockAsset(assetType: AssetType.Song, blockID: string): Song;
         lookupBlockAsset(assetType: AssetType, blockID: string): Asset;
         updateAsset(asset: ProjectImage): ProjectImage;
         updateAsset(asset: Tile): Tile;
         updateAsset(asset: ProjectTilemap): ProjectTilemap;
         updateAsset(asset: Animation): Animation;
+        updateAsset(asset: Song): Song;
         updateAsset(asset: Asset): Asset;
         duplicateAsset(asset: ProjectImage, displayName?: string): ProjectImage;
         duplicateAsset(asset: Tile, displayName?: string): Tile;
         duplicateAsset(asset: ProjectTilemap, displayName?: string): ProjectTilemap;
         duplicateAsset(asset: Animation, displayName?: string): Animation;
+        duplicateAsset(asset: Song, displayName?: string): Song;
         duplicateAsset(asset: Asset, displayName?: string): Asset;
         removeAsset(asset: Asset): void;
         addChangeListener(asset: Asset, listener: () => void): void;
@@ -2827,12 +2912,13 @@ declare namespace pxt {
         removeInactiveBlockAssets(activeBlockIDs: string[]): void;
         protected generateImage(entry: JRes, type: AssetType.Image): ProjectImage;
         protected generateImage(entry: JRes, type: AssetType.Tile): Tile;
+        protected generateSong(entry: JRes): Song;
         protected generateAnimation(entry: JRes): [Animation, boolean];
-        protected inflateAnimation(animation: Animation, assets: (Tile | ProjectImage | Animation)[]): Animation;
+        protected inflateAnimation(animation: Animation, assets: (Tile | ProjectImage | Animation | Song)[]): Animation;
         generateNewID(type: AssetType): string;
         protected generateNewIDInternal(type: AssetType, varPrefix: string, namespaceString?: string): string;
         protected onChange(): void;
-        protected readImages(allJRes: Map<JRes>, isProjectFile?: boolean): (Tile | ProjectImage | Animation)[];
+        protected readImages(allJRes: Map<JRes>, isProjectFile?: boolean): (Tile | ProjectImage | Animation | Song)[];
         protected cleanupTemporaryAssets(): void;
     }
     export function emitTilemapsFromJRes(jres: pxt.Map<JRes>): string;
@@ -2845,7 +2931,7 @@ declare namespace pxt {
         type: string;
         name: string;
     };
-    export function lookupProjectAssetByTSReference(ts: string, project: TilemapProject): Tile | ProjectImage | Animation | ProjectTilemap;
+    export function lookupProjectAssetByTSReference(ts: string, project: TilemapProject): Tile | ProjectImage | Animation | ProjectTilemap | Song;
     export function getDefaultAssetDisplayName(type: pxt.AssetType): string;
     export function getShortIDForAsset(asset: pxt.Asset): string;
     export {};