#640

Author: mvladic

packages/project-editor/flow/components/actions/index.tsx

@@ -1,3 +1,4 @@
+import path from "path";
 import React from "react";
 import {
     observable,
@@ -126,6 +127,7 @@ import {
     LANGUAGE_ICON,
     LOG_ICON,
     PALETTE_ICON,
+    PLAY_AUDIO_ICON,
     PRINT_TO_PDF_ICON
 } from "project-editor/ui-components/icons";
 import { humanize } from "eez-studio-shared/string";
@@ -2077,6 +2079,107 @@ export class LogActionComponent extends ActionComponent {
 
 ////////////////////////////////////////////////////////////////////////////////
 
+export class PlayAudioActionComponent extends ActionComponent {
+    static classInfo = makeDerivedClassInfo(ActionComponent.classInfo, {
+        enabledInComponentPalette: (projectType: ProjectType) =>
+            projectType === ProjectType.DASHBOARD,
+
+        properties: [
+            makeExpressionProperty(
+                {
+                    name: "audioFile",
+                    type: PropertyType.MultilineText,
+                    propertyGridGroup: specificGroup
+                },
+                "string"
+            )
+        ],
+        defaultValue: {},
+        icon: PLAY_AUDIO_ICON,
+        componentHeaderColor: "#C9E9D2",
+        execute: (context: IDashboardComponentContext) => {
+            const audioFile = context.evalProperty<string>("audioFile");
+            if (audioFile == undefined) {
+                context.throwError(`Invalid Audio file property`);
+                return;
+            }
+
+            // Create an AudioContext
+            const audioContext = new window.AudioContext();
+
+            // Function to play audio
+            function playAudio(url: string) {
+                fetch(url)
+                    .then(response => response.arrayBuffer())
+                    .then(arrayBuffer =>
+                        audioContext.decodeAudioData(arrayBuffer)
+                    )
+                    .then(audioBuffer => {
+                        const source = audioContext.createBufferSource();
+                        source.buffer = audioBuffer;
+                        source.connect(audioContext.destination);
+                        source.start(0);
+                    })
+                    .catch(error =>
+                        console.error("Error loading audio:", error)
+                    );
+            }
+
+            playAudio(audioFile);
+
+            context.propagateValueThroughSeqout();
+        }
+    });
+
+    audioFile: string;
+
+    override makeEditable() {
+        super.makeEditable();
+
+        makeObservable(this, {
+            audioFile: observable
+        });
+    }
+
+    getInputs() {
+        return [
+            {
+                name: "@seqin",
+                type: "any" as ValueType,
+                isSequenceInput: true,
+                isOptionalInput: true
+            },
+            ...super.getInputs()
+        ];
+    }
+
+    getOutputs() {
+        return [
+            {
+                name: "@seqout",
+                type: "null" as ValueType,
+                isSequenceOutput: true,
+                isOptionalOutput: true
+            },
+            ...super.getOutputs()
+        ];
+    }
+
+    getBody(flowContext: IFlowContext): React.ReactNode {
+        if (!this.audioFile) {
+            return null;
+        }
+
+        return (
+            <div className="body">
+                <pre>{path.basename(this.audioFile)}</pre>
+            </div>
+        );
+    }
+}
+
+////////////////////////////////////////////////////////////////////////////////
+
 export class CallActionActionComponent extends ActionComponent {
     static classInfo = makeDerivedClassInfo(ActionComponent.classInfo, {
         flowComponentId: COMPONENT_TYPE_CALL_ACTION_ACTION,
@@ -4969,6 +5072,8 @@ registerClass("SortArrayActionComponent", SortArrayActionComponent);
 
 registerClass("LogActionComponent", LogActionComponent);
 
+registerClass("PlayAudioActionComponent", PlayAudioActionComponent);
+
 registerClass("ReadSettingActionComponent", ReadSettingActionComponent);
 registerClass("WriteSettingsActionComponent", WriteSettingsActionComponent);
 

packages/project-editor/ui-components/icons.tsx

@@ -3558,3 +3558,12 @@ export const FOCUS_WIDGET_ICON: any = (
         />
     </svg>
 );
+
+export const PLAY_AUDIO_ICON = (
+    <svg fill="currentcolor" viewBox="-100 -100 2120 2120">
+        <path
+            d="M1129.432 113v1694.148H903.545l-451.772-451.773V564.773L903.545 113h225.887Zm542.545 248.057C1832.017 521.097 1920 733.882 1920 960.107c0 226.226-87.983 438.898-248.023 598.938l-79.851-79.85c138.694-138.582 214.93-323.018 214.93-519.087 0-196.183-76.236-380.506-214.93-519.2ZM338.83 564.773v790.602H169.415C75.672 1355.375 0 1279.703 0 1185.96V734.187c0-93.742 75.672-169.414 169.415-169.414H338.83Zm1093.922 36.085c95.776 97.018 148.407 224.644 148.407 359.16 0 134.628-52.631 262.253-148.407 359.272l-80.303-79.174c74.656-75.897 115.767-175.4 115.767-280.099 0-104.585-41.111-204.088-115.767-279.986Z"
+            fillRule="evenodd"
+        />
+    </svg>
+);