Skip to Content
Author's profile photo Martin Pankraz

DesignStudio SDK: Beeep – A sound idea

Dear all,

 

As requested by Alex Cruickshank in his question How to make Design Studio play a sound I added a new SDK component called Audio to our community repository to bring some music to our dashboards.

So far it was only possible to inform dashboard users by visual notifications using the standard message box, popups or the SDK notification bar for instance. As of now you can appeal to one more human sense, which is the ear. To do so you need a simple audio file in a commonly used format like mp3 etc. You can have a look at all supported formats here.

As usual when adding a new feature to DesignStudio I searched the web for appealing open-source JS libraries solving the issue most gracefully. Howler.js, which is also used by big players like Google, NASA or Disney made the cut for me and is now hooked up with the new SDK component Audio. The library offers a big variety of options regarding playing and manipulating the source sound. So far I only exposed a minimum subset of options to get the component out there. Feel free to request enhancements if you need any or to fork our repository on GitHub.

 

Available Functions:

  • Play a sound
  • Stop Playing
  • Applying volume to the sound
  • Assigining exactly one sound file per Audio component and an
  • Event which fires when the sound finishes playing

To be more specific on the type of component, it is a technical one. So you will not find it on the components tree. You need to add it on the outline like you do with the context menu.

Install/Update our SDK components as usual. If you are new to using SDK components find instructions on how to do this here.

 

Let me know what you think and what kind of music you play to your users 😉

 

Yours

Martin

Assigned tags

      11 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Alex Cruickshank
      Alex Cruickshank

      Hi Martin

      Thanks so much for this! I never got round to trying that as the main sponsor didn't want to use it 🙁

      I am going to be sure to get this in somewhere though! watch this space 🙂

      Author's profile photo Former Member
      Former Member

       

      Martin,

      I was excited to see that you had built an "audio" feature for Design Studio.  I have a very similar situation to Alex and would like to play an alert when my dashboard refreshes (it refreshes every minute on a timer).  I installed the SDK but was unable to locate the "audio" component.  Could you help point me in the right direction?

       

      Thanks!

      Jena

      Author's profile photo Karol Kalisz
      Karol Kalisz

      Hi Jena,

      have you tried to expand the technical components as in the screen here?

      this is the place where AUDIO component is placed. Let us know if it works.

      Regards, Karol

      Author's profile photo Former Member
      Former Member

      Karol,

      Thank you for your response!  I was now able to add  an audio component.  When I browse to the URL of the sound file, it only displays image files and not any other.  However, I manually typed in the URL/file name.

      Then, on a button click event, I coded the audio to play

      However, when I launch my dashboard, nothing plays.  Any feedback?

      Thank you!

      Jena

      Author's profile photo Former Member
      Former Member

      Just wanted to check in to see if anyone might have feedback on the sound feature.  My business partner is very interested in utilizing this.

      Author's profile photo Martin Pankraz
      Martin Pankraz
      Blog Post Author

      Hi Jena,

       

      I am finally back from my trip. Are you sure the file path to your sound file is correct? Please check your browser's developer console (hit F12 and navigate to console tab) for errors. This feature was last tested with DS1.6. Are you running Lumira 2.x?

       

      Kind regards

      Martin

      Author's profile photo Martin Pankraz
      Martin Pankraz
      Blog Post Author

      Hi Jena,

      There was a problem with SDK changes for Lumira 2.0 and late SPs of DesignStudio 1.6. I just fixed that for Lumira 2.0. Do you need it for an older release too?

      The file picker dialog only supports images by default but you can change the file type manually to "all" so that you can choose the sound file properly.

      Let me know how it goes.

      Kind regards

      Martin

      Author's profile photo Abubakar Balejadam
      Abubakar Balejadam

      Hi Martin,

       

      This is great piece of work 🙂

       

      Do you have or know any similar thing for receiving voice through system microphone?

       

      Thanks

      Abu

      Author's profile photo Martin Pankraz
      Martin Pankraz
      Blog Post Author

      Hi Abu,

       

      Thanks for your comment. Do you mean recording or voice recognition? For the latter I did some experiments with Amazon Alexa. Here is also a nice blog post for that matter: https://blogs.sap.com/2016/09/15/amazon-echo-and-sap-businessobjects-design-studio/

       

      Kind regards

      Martin

      Author's profile photo Abubakar Balejadam
      Abubakar Balejadam

      Hi Martin,

       

      I was looking for the latter one. Do you have sample SDK for this too?

      I checked the blog and found it very helpful. Maybe i will have to read about RESTful APIs.

       

      Thanks,

      Abu

      Author's profile photo Martin Pankraz
      Martin Pankraz
      Blog Post Author

      Hi Abu,

       

      You are welcome. I haven't published any component for Alexa because the interface is very specific. But actually most of the work is on the Amazon Alexa Skill and the integration to your Business Objects.

       

      Kind regards

      Martin