Working on web examples

docs/examples/web/audio_module_playing.c

@@ -36,16 +36,16 @@ typedef struct {
 int screenWidth = 800;
 int screenHeight = 450;
 
-float timePlayed = 0.0f;
-
 Color colors[14] = { ORANGE, RED, GOLD, LIME, BLUE, VIOLET, BROWN, LIGHTGRAY, PINK,
                      YELLOW, GREEN, SKYBLUE, PURPLE, BEIGE };
 
 // Creates ome circles for visual effect
 CircleWave circles[MAX_CIRCLES];
 
-Shader shader;
+Music xm;
-RenderTexture2D target;
+
+float timePlayed = 0.0f;
+static bool pause = false;
 
 //----------------------------------------------------------------------------------
 // Module Functions Declaration
@@ -73,14 +73,9 @@ int main()
         circles[i].color = colors[GetRandomValue(0, 13)];
     }
 
-    // Load postprocessing bloom shader
+    xm = LoadMusicStream("resources/audio/mini1111.xm");
-    shader = LoadShader("resources/shaders/glsl100/base.vs", 
-                        "resources/shaders/glsl100/bloom.fs");
     
-    // Create a RenderTexture2D to be used for render to texture
+    PlayMusicStream(xm);            // Play module stream
-    target = LoadRenderTexture(screenWidth, screenHeight);
-
-    PlayMusicStream(0, "resources/audio/2t2m_spa.xm");         // Play module stream
     
 #if defined(PLATFORM_WEB)
     emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
@@ -97,8 +92,7 @@ int main()
 
     // De-Initialization
     //--------------------------------------------------------------------------------------
-    UnloadShader(shader);           // Unload shader
+    UnloadMusicStream(xm);          // Unload music stream buffers from RAM
-    UnloadRenderTexture(target);    // Unload render texture
     
     CloseAudioDevice();             // Close audio device (music streaming is automatically stopped)
 
@@ -115,6 +109,27 @@ void UpdateDrawFrame(void)
 {
     // Update
     //----------------------------------------------------------------------------------
+    UpdateMusicStream(xm);        // Update music buffer with new stream data
+    
+    // Restart music playing (stop and play)
+    if (IsKeyPressed(KEY_SPACE)) 
+    {
+        StopMusicStream(xm);
+        PlayMusicStream(xm);
+    }
+    
+    // Pause/Resume music playing 
+    if (IsKeyPressed(KEY_P))
+    {
+        pause = !pause;
+        
+        if (pause) PauseMusicStream(xm);
+        else ResumeMusicStream(xm);
+    }
+    
+    // Get timePlayed scaled to bar dimensions
+    timePlayed = GetMusicTimePlayed(xm)/GetMusicTimeLength(xm)*(screenWidth - 40);
+        
     for (int i = MAX_CIRCLES - 1; i >= 0; i--)
     {
         circles[i].alpha += circles[i].speed;
@@ -132,39 +147,23 @@ void UpdateDrawFrame(void)
             circles[i].speed = (float)GetRandomValue(1, 100)/20000.0f;
         }
     }
-
-    // Get timePlayed scaled to bar dimensions
-    timePlayed = (GetMusicTimePlayed(0)/GetMusicTimeLength(0)*(screenWidth - 40))*2;
-    
-    UpdateMusicStream(0);        // Update music buffer with new stream data
     //----------------------------------------------------------------------------------
 
     // Draw
     //----------------------------------------------------------------------------------
     BeginDrawing();
 
-        ClearBackground(BLACK);
+        ClearBackground(RAYWHITE);
-        
-        BeginTextureMode(target);   // Enable drawing to texture
         
         for (int i = MAX_CIRCLES - 1; i >= 0; i--)
         {
             DrawCircleV(circles[i].position, circles[i].radius, Fade(circles[i].color, circles[i].alpha));
         }
         
-        EndTextureMode();           // End drawing to texture (now we have a texture available for next passes)
-        
-        BeginShaderMode(shader);
-
-            // NOTE: Render texture must be y-flipped due to default OpenGL coordinates (left-bottom)
-            DrawTextureRec(target.texture, (Rectangle){ 0, 0, target.texture.width, -target.texture.height }, (Vector2){ 0, 0 }, WHITE);
-            
-        EndShaderMode();
-
         // Draw time bar
         DrawRectangle(20, screenHeight - 20 - 12, screenWidth - 40, 12, LIGHTGRAY);
         DrawRectangle(20, screenHeight - 20 - 12, (int)timePlayed, 12, MAROON);
-        DrawRectangleLines(20, screenHeight - 20 - 12, screenWidth - 40, 12, WHITE);
+        DrawRectangleLines(20, screenHeight - 20 - 12, screenWidth - 40, 12, GRAY);
 
     EndDrawing();
     //----------------------------------------------------------------------------------

docs/examples/web/audio_raw_stream.c

@@ -13,28 +13,51 @@
 
 #include "raylib.h"
 
+#if defined(PLATFORM_WEB)
+    #include <emscripten/emscripten.h>
+#endif
+
 #include <stdlib.h>         // Required for: malloc(), free()
 #include <math.h>           // Required for: sinf()
 
 #define MAX_SAMPLES             22050
 #define MAX_SAMPLES_PER_UPDATE   4096
 
+//----------------------------------------------------------------------------------
+// Global Variables Definition
+//----------------------------------------------------------------------------------
+const int screenWidth = 800;
+const int screenHeight = 450;
+
+AudioStream stream;
+short *data;
+
+int totalSamples = MAX_SAMPLES;
+int samplesLeft = MAX_SAMPLES;
+
+Vector2 position = { 0, 0 };
+
+//----------------------------------------------------------------------------------
+// Module Functions Declaration
+//----------------------------------------------------------------------------------
+void UpdateDrawFrame(void);     // Update and Draw one frame
+
+//----------------------------------------------------------------------------------
+// Main Enry Point
+//----------------------------------------------------------------------------------
 int main()
 {
     // Initialization
     //--------------------------------------------------------------------------------------
-    int screenWidth = 800;
-    int screenHeight = 450;
-
     InitWindow(screenWidth, screenHeight, "raylib [audio] example - raw audio streaming");
 
     InitAudioDevice();              // Initialize audio device
 
     // Init raw audio stream (sample rate: 22050, sample size: 16bit-short, channels: 1-mono)
-    AudioStream stream = InitAudioStream(22050, 16, 1);
+    stream = InitAudioStream(22050, 16, 1);
     
     // Generate samples data from sine wave
-    short *data = (short *)malloc(sizeof(short)*MAX_SAMPLES);
+    data = (short *)malloc(sizeof(short)*MAX_SAMPLES);
     
     // TODO: Review data generation, it seems data is discontinued for loop,
     // for that reason, there is a clip everytime audio stream is looped...
@@ -45,16 +68,37 @@ int main()
     
     PlayAudioStream(stream);        // Start processing stream buffer (no data loaded currently)
     
-    int totalSamples = MAX_SAMPLES;
+#if defined(PLATFORM_WEB)
-    int samplesLeft = totalSamples;
+    emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
-    
+#else
-    Vector2 position = { 0, 0 };
+    SetTargetFPS(60);   // Set our game to run at 60 frames-per-second
-
-    SetTargetFPS(30);               // Set our game to run at 30 frames-per-second
     //--------------------------------------------------------------------------------------
     
     // Main game loop
     while (!WindowShouldClose())    // Detect window close button or ESC key
+    {
+        UpdateDrawFrame();
+    }
+#endif
+
+    // De-Initialization
+    //--------------------------------------------------------------------------------------
+    free(data);                 // Unload sine wave data
+    
+    CloseAudioStream(stream);   // Close raw audio stream and delete buffers from RAM
+
+    CloseAudioDevice();         // Close audio device (music streaming is automatically stopped)
+
+    CloseWindow();              // Close window and OpenGL context
+    //--------------------------------------------------------------------------------------
+
+    return 0;
+}
+
+//----------------------------------------------------------------------------------
+// Module Functions Definition
+//----------------------------------------------------------------------------------
+void UpdateDrawFrame(void)
 {
     // Update
     //----------------------------------------------------------------------------------
@@ -98,17 +142,3 @@ int main()
     EndDrawing();
     //----------------------------------------------------------------------------------
 }
-
-    // De-Initialization
-    //--------------------------------------------------------------------------------------
-    free(data);                 // Unload sine wave data
-    
-    CloseAudioStream(stream);   // Close raw audio stream and delete buffers from RAM
-
-    CloseAudioDevice();         // Close audio device (music streaming is automatically stopped)
-
-    CloseWindow();              // Close window and OpenGL context
-    //--------------------------------------------------------------------------------------
-
-    return 0;
-}

docs/examples/web/makefile

@@ -498,6 +498,15 @@ audio_sound_loading: audio_sound_loading.c
 audio_music_stream: audio_music_stream.c
 	$(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDES) $(LFLAGS) $(LIBS) -D$(PLATFORM) $(WINFLAGS) --preload-file resources/audio/guitar_noodling.ogg
 
+# compile [audio] example - music stream playing (OGG)
+audio_module_playing: audio_module_playing.c
+	$(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDES) $(LFLAGS) $(LIBS) -D$(PLATFORM) $(WINFLAGS) --preload-file resources/audio/mini1111.xm
+
+# compile [audio] example - music stream playing (OGG)
+audio_raw_stream: audio_raw_stream.c
+	$(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDES) $(LFLAGS) $(LIBS) -D$(PLATFORM) $(WINFLAGS) -s ALLOW_MEMORY_GROWTH=1
+
+    
 # fix dylib install path name for each executable (MAC)
 fix_dylib:
 ifeq ($(PLATFORM_OS),OSX)