Playing sound on click of button in SAPUI5

Click here and follow my SAP UI5/FIORI snippets and information Page

This application would play music on click of button. There is a input field and a button field in view. if you click on submit button after filling the input field then sound would play, here I have used “Audio” object of javaScript and its method “play ()”, passed  full path of audio file in the constructor.Go through it and please let me know in case of any issue/doubt.

Application Structure

Controller Part

// When you click on refresh icon then this function will fire…….

OnClear:function()

{

            this.byId("inputId").setValue();          

},

// When you click on submit button then this function will fire…….

onButtonPress:function()

{

            var inputValue=this.byId("inputId").getValue();

            if(inputValue===null||inputValue===undefined||inputValue==="")

                        {

                        sap.m.MessageToast.show("Enter order id");

                        return;

                        }

            var audio = new Audio("audio/sound.mp3" ) ;

     audio.oncanplaythrough = function(){

             audio.play();

            }

this.byId("inputId").setValue();          

}

View Part

<Page title="Audio">

<headerContent>

<Button icon="sap-icon://refresh" press="OnClear"/>

</headerContent>

<content>

<l:Grid defaultSpan="L12 M12 S12">

<l:content>

<f:SimpleForm id="SimpleFormChange354" minWidth="1024"

maxContainerCols="2" editable="true" layout="ResponsiveGridLayout"

labelSpanL="5" labelSpanM="4" emptySpanL="5" emptySpanM="2"

columnsL="2" columnsM="2" class="editableForm">

<f:content>

<Label text=""></Label>

<Input placeholder="Ender Order Id" id="inputId">

<layoutData>

<l:GridData span="L3 M4 S6">

</l:GridData>

</layoutData>

</Input>

<Button press="onButtonPress" type="Accept" text="submit">

<layoutData>

<l:GridData span="L1 M2 S6">

</l:GridData>

</layoutData>

</Button>

</f:content>

</f:SimpleForm>

</l:content>

</l:Grid>

</content>

</Page>

Result