Embedding the Sono WebAudio library

[erion]

Hello,

I'm currently trying to embed the Sono webAudio library (https://github.com/Stinkstudios/sono), however I get a reference not found error in the web console, when running the application. The main sono object is not found.

Code: Select all

Procedure.i HeaderInclude(filename.s)
  Protected filetype.s = GetExtensionPart(filename) 
  
  Select LCase(filetype)
    Case "less"     
      !$('<link rel="stylesheet/less" type="text/css">').attr('href',v_filename).appendTo('head');
    Case "css"     
      !$('<link rel="stylesheet" type="text/css">').attr('href',v_filename).appendTo('head');
    Case "js"     
      !$('<script type="text/javascript"></script>').attr('src',v_filename).appendTo('head');      
  EndSelect   
EndProcedure

OpenWindow(0,300,300,300,300,"")
  HeaderInclude("sono.js")
  EnableJS
  var sono = window.sono;
  sound = sono.createSound({
        src: [
'dnb-loop.mp3'
        ],
        loop: true
    });
    sound.play()
    DisableJS

I've tried both sono and window.sono, but no luck, unfortunately. Any help is appreciated.

Erion

[Peter]

this works for me:

Code: Select all

Procedure Main(sono)
  ! var sound = v_sono.createSound({ src: ['dnb-loop.mp3'], loop: true });
  ! sound.play();
EndProcedure

Procedure Init(Callback)
  ! require(["sono.js"], 
  !   function(sono) {
  !     v_callback(sono);
  !   }
  ! );     
EndProcedure

Init(@Main())

Greetings ... Peter

[erion]

Hello Peter,

Thank you very much for your solution, it works like a charm here as well.

Your solution is interesting, because I thought Sono returns an object on the window. Here, however, as far as I can see, you used 'require', which is commonly used for Node packages.

Please excuse my inexperience with JS, but is there a way to pass this sono object to other functions? For example to create a SB wrapper module around Sono to create sounds, play/pause/stop, etc. That is to say, can I make this sono object available for other SB functions? (tried setting it as a value of a global variable, but the browser complained about an invalid reference, so this is probably not the right way.)

Once again, thank you very much for your help.

Erion

[Peter]

perhaps this is a starting point for you:

Code: Select all

DeclareModule Sono
  
  Declare Init(Callback)
  Declare CreateSound(Source.s)
  Declare Play(Sound)
  Declare Pause(Sound)
  Declare SetVolume(Volume)
  
EndDeclareModule

Module Sono
  
  EnableExplicit
  
  Global SonoObject
  
  Procedure Init(Callback)
    
    ! require(["sono.js"], 
    !   function(sono) {
    !     v_sonoobject = sono
    !     v_callback();
    !   }
    ! );     
    
  EndProcedure
  
  Procedure CreateSound(Source.s)
    ! return v_sonoobject.createSound({ src: [v_source], loop: true });
  EndProcedure
  
  Procedure Play(Sound)
    ! v_sound.play();
  EndProcedure
  
  Procedure Pause(Sound)
    ! v_sound.pause();
  EndProcedure
  
  Procedure SetVolume(Volume)
    ! v_sonoobject.volume = v_volume / 10;
  EndProcedure
  
EndModule

; ----------------

; Demo:

EnableExplicit
  
Enumeration
  #Window
EndEnumeration

Enumeration
  #cmdPlay
  #cmdPause
  #trkVolume
EndEnumeration

Global Sound

Procedure cmdPlayEvent()
  Sono::Play(Sound)
EndProcedure

Procedure cmdPauseEvent()
  Sono::Pause(Sound)
EndProcedure

Procedure trkVolumeEvent()
  Sono::SetVolume(GetGadgetState(#trkVolume))
EndProcedure

Procedure Main()
  
  OpenWindow(#Window, #PB_Ignore, #PB_Ignore, 230, 80, "Sono-Player", #PB_Window_ScreenCentered)
  
  ButtonGadget(#cmdPlay, 10, 10, 100, 30, "Play")
  ButtonGadget(#cmdPause, 120, 10, 100, 30, "Pause")
  
  TrackBarGadget(#trkVolume, 10, 40, 210, 30, 0, 10)
  SetGadgetState(#trkVolume, 10)
  
  Sound = Sono::CreateSound("dnb-loop.mp3")
  
  BindGadgetEvent(#cmdPlay, @cmdPlayEvent())
  BindGadgetEvent(#cmdPause, @cmdPauseEvent())
  BindGadgetEvent(#trkVolume, @trkVolumeEvent())
  
EndProcedure

Sono::Init(@Main())

Greetings ... Peter

[erion]

Peter,
You are wonderful, thank you very much!

For some reason, setting the sono object as a global variable's value does not work in 'main()', but your module works nicely. I will probably post the result in the Tips and Tricks forum.

Cheers,
Erion