sox_play.html

<!--
  Copyright 2020, Johannes Kropf
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
  http://www.apache.org/licenses/LICENSE-2.0
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<script type="text/javascript">
    RED.nodes.registerType('sox-play',{
        category: 'Sox Utils',
        color: '#c28285',
        defaults: {
            name: {value:""},
            outputDevice: {value:'default', required:true},
            manualOutput: {value:""},
            gain: {value:'0', required:true},
            startNew: {value:'skip', required:true},
            playStream: {value:false, required:true},
            inputEncoding: {value:"signed-integer", required:false},
            inputChannels: {value:1, required:false},
            inputRate: {value:16000, required:false},
            inputBits: {value:16, required:false},
            debugOutput: {value:false, required:true}
        },
        inputs:1,
        outputs:1,
        icon: "font-awesome/fa-volume-up",
        inputLabels: function(index) {
            return 'wav buffer or wav file path';
        },
        outputLabels: function(index) {
            return 'playback info';
        },
        label: function() {
            return this.name||"sox-play";
        },
        oneditprepare: function() {
            var node = this;
            
            $("#node-input-playStream").on("change", function(){
                if ($('#node-input-playStream').is(":checked")) { 
                    $("#startNewRow").hide();
                    $("#inputFormatWrapper").show();
                } else {
                    $("#startNewRow").show();
                    $("#inputFormatWrapper").hide();
                }
            });
            
            $.getJSON('soxPlay/devices',function(data) {
                if (data === "error") {
                    //$("#error-wrapper").hide();
                    return;
                }
                $("#error").hide();
                data.forEach(device => {
                    $('#node-input-outputDevice').append(`<option value="${device.number}">${device.name}</option>`);
                });
                $('#node-input-outputDevice').val(node.outputDevice);
            });
            
            $("#node-input-outputDevice").on("change", function(){
                let value = $("#node-input-outputDevice").val();
                if (value === "manualOutput") {
                    $("#manualOutputWrapper").show();
                } else {
                    $("#manualOutputWrapper").hide();
                }
            });
        }
    });
</script>

<script type="text/html" data-template-name="sox-play">
    <div id="error">
        <p>Something went wrong. The node couldnt retrieve any devices. The node only runs on Linux with ALSA. If any errors where logged you will find them in the syslog. You can still try to play to the default device.</p>
    </div>
    <div id="error-wrapper">
        <h4>Input Settings</h4>
        <div class="form-row" id="startNewRow">
            <label for="node-input-startNew"></i>on new input while playing</label>
            <select id="node-input-startNew">
                <option value="skip">ignore new input and keep current playback</option>
                <option value="start">replace current playback with new input</option>
                <option value="queue">add new input to queue if already playing</option>
            </select>
        </div>
        <div class="form-row">
            <label for="node-input-playStream"></i>stream</label>
            <input type="checkbox" id="node-input-playStream" style="display:inline-block; width: auto; vertical-align:baseline;" value="false">
            <label for="node-input-playStream" style="width: 70%;">input is a raw audio stream</label>
        </div>
        <div id="inputFormatWrapper">
            <div class="form-row">
                <label for="node-input-inputEncoding"></i>encoding</label>
                <select id="node-input-inputEncoding">
                    <option value="signed-integer">signed-integer</option> 
                    <option value="unsigned-integer">unsigned-integer</option>
                    <option value="floating-point">floating-point</option>
                </select>
            </div>
            <div class="form-row">
                <label for="node-input-inputChannels"><i class="icon-tag"></i>channels</label>
                <input type="number" id="node-input-inputChannels" value="1" />
            </div>
            <div class="form-row">
                <label for="node-input-inputRate"><i class="icon-tag"></i>sample-rate</label>
                <input type="number" id="node-input-inputRate" value="16000" />
            </div>
            <div class="form-row">
                <label for="node-input-inputBits"><i class="icon-tag"></i>bit-depth</label>
                <input type="number" id="node-input-inputBits" value="16" />
            </div>
        </div>
        <h4>Output settings</h4>
        <div class="form-row">
            <label for="node-input-outputDevice"></i>output device</label>
            <select id="node-input-outputDevice">
                <option value="default">default device</option>
                <option value="manualOutput">define output device manually</option>
            </select>
        </div>
        <div class="form-row" id="manualOutputWrapper">
            <label for="node-input-manualOutput"><i class="icon-tag"></i>manual output input</label>
            <input type="text" id="node-input-manualOutput" value="" />
        </div>
        <div class="form-row">
            <label for="node-input-gain"><i class="icon-tag"></i>gain in dB</label>
            <input type="text" id="node-input-gain" value="0" />
        </div>
        <div class="form-row">
            <label for="node-input-debugOutput"></i>debug</label>
            <input type="checkbox" id="node-input-debugOutput" style="display:inline-block; width: auto; vertical-align:baseline;" value="false">
            <label for="node-input-debugOutput" style="width: 70%;">detailed debug and playpack info</label>
        </div>
    </div>
    <h4>Name</h4>
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>

<script type="text/html" data-help-name="sox-play">
    <p><strong>A simple wrapper node around the play functionality of the sox commandline utility.</strong><br/></p>
    <p>The node will play audio on the machine node-red runs on to the choosen output device from either a wav buffer send to it in the <code>msg.payload</code> or a path to an audio file as a string in the <code>msg.payload</code>. It will output playback information and any debug info in the <code>msg.payload</code> to its output. You can stop the playback at anytime with a <code>msg.payload</code> of <strong>stop</strong>. When playing in queue mode and there is items in the queue the node also accepts a <code>msg.payload</code> of <strong>clear</strong> to clear the queue or <strong>next</strong> to skip to the next item in the queue. When stopped the queue will be automatically cleared. The node tries to guess
        the audio format of buffer inputs for aiff, wav, flac, mp3 and ogg. For other formats you have to
        include the file extension as <code>msg.format</code> with the buffer input.<br/></p>
    <p><i>For detailed usage information please go to <a href="https://github.com/johanneskropf/node-red-contrib-sox-utils">node-red-contrib-sox-utils</a>.</i></p>
</script>