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,19 +73,14 @@ 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);
 #else
-    SetTargetFPS(60);   // Set our game to run at 60 frames-per-second
+    SetTargetFPS(60);               // Set our game to run at 60 frames-per-second
     //--------------------------------------------------------------------------------------
     
     // Main game loop
@@ -97,12 +92,11 @@ 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)
+    CloseAudioDevice();             // Close audio device (music streaming is automatically stopped)
 
-    CloseWindow();          // Close window and OpenGL context
+    CloseWindow();                  // Close window and OpenGL context
     //--------------------------------------------------------------------------------------
 
     return 0;
@@ -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--)
-
+        {
-            for (int i = MAX_CIRCLES - 1; i >= 0; i--)
+            DrawCircleV(circles[i].position, circles[i].radius, Fade(circles[i].color, circles[i].alpha));
-            {
+        }
-                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,59 +68,18 @@ 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
     {
-        // Update
+        UpdateDrawFrame();
-        //----------------------------------------------------------------------------------
-        
-        // Refill audio stream if required
-        // NOTE: Every update we check if stream data has been already consumed and we update
-        // buffer with new data from the generated samples, we upload data at a rate (MAX_SAMPLES_PER_UPDATE),
-        // but notice that at some point we update < MAX_SAMPLES_PER_UPDATE data...
-        if (IsAudioBufferProcessed(stream)) 
-        {
-            int numSamples = 0;
-            if (samplesLeft >= MAX_SAMPLES_PER_UPDATE) numSamples = MAX_SAMPLES_PER_UPDATE;
-            else numSamples = samplesLeft;
-
-            UpdateAudioStream(stream, data + (totalSamples - samplesLeft), numSamples);
-            
-            samplesLeft -= numSamples;
-            
-            // Reset samples feeding (loop audio)
-            if (samplesLeft <= 0) samplesLeft = totalSamples;
-        }
-        //----------------------------------------------------------------------------------
-
-        // Draw
-        //----------------------------------------------------------------------------------
-        BeginDrawing();
-
-            ClearBackground(RAYWHITE);
-
-            DrawText("SINE WAVE SHOULD BE PLAYING!", 240, 140, 20, LIGHTGRAY);
-            
-            // NOTE: Draw a part of the sine wave (only screen width, proportional values)
-            for (int i = 0; i < GetScreenWidth(); i++)
-            {
-                position.x = i;
-                position.y = 250 + 50*data[i]/32000;
-                
-                DrawPixelV(position, RED);
-            }
-
-        EndDrawing();
-        //----------------------------------------------------------------------------------
     }
+#endif
 
     // De-Initialization
     //--------------------------------------------------------------------------------------
@@ -112,3 +94,51 @@ int main()
 
     return 0;
 }
+
+//----------------------------------------------------------------------------------
+// Module Functions Definition
+//----------------------------------------------------------------------------------
+void UpdateDrawFrame(void)
+{
+    // Update
+    //----------------------------------------------------------------------------------
+    
+    // Refill audio stream if required
+    // NOTE: Every update we check if stream data has been already consumed and we update
+    // buffer with new data from the generated samples, we upload data at a rate (MAX_SAMPLES_PER_UPDATE),
+    // but notice that at some point we update < MAX_SAMPLES_PER_UPDATE data...
+    if (IsAudioBufferProcessed(stream)) 
+    {
+        int numSamples = 0;
+        if (samplesLeft >= MAX_SAMPLES_PER_UPDATE) numSamples = MAX_SAMPLES_PER_UPDATE;
+        else numSamples = samplesLeft;
+
+        UpdateAudioStream(stream, data + (totalSamples - samplesLeft), numSamples);
+        
+        samplesLeft -= numSamples;
+        
+        // Reset samples feeding (loop audio)
+        if (samplesLeft <= 0) samplesLeft = totalSamples;
+    }
+    //----------------------------------------------------------------------------------
+
+    // Draw
+    //----------------------------------------------------------------------------------
+    BeginDrawing();
+
+        ClearBackground(RAYWHITE);
+
+        DrawText("SINE WAVE SHOULD BE PLAYING!", 240, 140, 20, LIGHTGRAY);
+        
+        // NOTE: Draw a part of the sine wave (only screen width, proportional values)
+        for (int i = 0; i < GetScreenWidth(); i++)
+        {
+            position.x = i;
+            position.y = 250 + 50*data[i]/32000;
+            
+            DrawPixelV(position, RED);
+        }
+
+    EndDrawing();
+    //----------------------------------------------------------------------------------
+}

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)