Exposed volume prop in HowlOptions (#18)

* Exposed volume prop in HowlOptions * Applied renaming according to comments Co-authored-by: Kus <[email protected]>
StefH · Jun 1, 2021 · a2b3c30 · a2b3c30
1 parent 31bbe23
commit a2b3c30
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 4 deletions.
diff --git a/examples/Howler.Blazor-AudioPlayer/Pages/Example.razor b/examples/Howler.Blazor-AudioPlayer/Pages/Example.razor
@@ -19,6 +19,14 @@
             <td><button class="btn btn-primary oi oi-media-play" @onclick="Play3"></button></td>
             <td>Play an audio file with source location and format</td>
         </tr>
+        <tr>
+            <td><button class="btn btn-primary oi oi-media-play" @onclick="PlayAudioWithHalfVolume"></button></td>
+            <td>Play an audio file with source location, format and volume set to half</td>
+        </tr>
+        <tr>
+            <td><button class="btn btn-primary oi oi-media-play" @onclick="PlayAudioWithQuarterVolume"></button></td>
+            <td>Play an audio file with source location, format and volume set to 1 / 4</td>
+        </tr>
         <tr>
             <td><button class="btn btn-primary oi oi-media-play" @onclick="PlayLoop"></button></td>
             <td>Play and loop an audio file</td>
@@ -156,6 +164,36 @@
         SoundIds.Add(await Howl.Play(options));
     }
 
+    protected async Task PlayAudioWithHalfVolume()
+    {
+        ErrorMessage = string.Empty;
+        Rate = 1.0;
+
+        var options = new HowlOptions
+        {
+            Sources = new[] { "https://lookandstore.blob.core.windows.net/863da396-6e44-4b3b-8db1-e447d87b121f/instrumental_mp3_637141046337946343_99lfo/instrumental_mp3?sv=2018-03-28&sr=b&sig=96LJ7bycF3lrtiWbVP5tK6%2BOOIJKfq7eYPO%2FjOT72ns%3D&se=2022-10-04T18%3A23%3A53Z&sp=rl" },
+            Formats = new[] { "mp3" },
+            Volume = 0.5
+        };
+
+        SoundIds.Add(await Howl.Play(options));
+    }
+
+    protected async Task PlayAudioWithQuarterVolume()
+    {
+        ErrorMessage = string.Empty;
+        Rate = 1.0;
+
+        var options = new HowlOptions
+        {
+            Sources = new[] { "https://lookandstore.blob.core.windows.net/863da396-6e44-4b3b-8db1-e447d87b121f/instrumental_mp3_637141046337946343_99lfo/instrumental_mp3?sv=2018-03-28&sr=b&sig=96LJ7bycF3lrtiWbVP5tK6%2BOOIJKfq7eYPO%2FjOT72ns%3D&se=2022-10-04T18%3A23%3A53Z&sp=rl" },
+            Formats = new[] { "mp3" },
+            Volume = 0.25
+        };
+
+        SoundIds.Add(await Howl.Play(options));
+    }
+
     protected async Task PlayLoop()
     {
         ErrorMessage = string.Empty;

diff --git a/examples/Howler.Blazor-WASM-AudioPlayer-NET5/Pages/Example.razor b/examples/Howler.Blazor-WASM-AudioPlayer-NET5/Pages/Example.razor
@@ -19,6 +19,14 @@
             <td><button class="btn btn-primary oi oi-media-play" @onclick="Play3"></button></td>
             <td>Play an audio file with source location and format</td>
         </tr>
+        <tr>
+            <td><button class="btn btn-primary oi oi-media-play" @onclick="PlayAudioWithHalfVolume"></button></td>
+            <td>Play an audio file with source location, format and volume set to half</td>
+        </tr>
+        <tr>
+            <td><button class="btn btn-primary oi oi-media-play" @onclick="PlayAudioWithQuarterVolume"></button></td>
+            <td>Play an audio file with source location, format and volume set to 1 / 4</td>
+        </tr>
         <tr>
             <td><button class="btn btn-primary oi oi-media-play" @onclick="PlayLoop"></button></td>
             <td>Play and loop an audio file</td>
@@ -156,6 +164,36 @@
         SoundIds.Add(await Howl.Play(options));
     }
 
+    protected async Task PlayAudioWithHalfVolume()
+    {
+        ErrorMessage = string.Empty;
+        Rate = 1.0;
+
+        var options = new HowlOptions
+        {
+            Sources = new[] { "https://lookandstore.blob.core.windows.net/863da396-6e44-4b3b-8db1-e447d87b121f/instrumental_mp3_637141046337946343_99lfo/instrumental_mp3?sv=2018-03-28&sr=b&sig=96LJ7bycF3lrtiWbVP5tK6%2BOOIJKfq7eYPO%2FjOT72ns%3D&se=2022-10-04T18%3A23%3A53Z&sp=rl" },
+            Formats = new[] { "mp3" },
+            Volume = 0.5
+        };
+
+        SoundIds.Add(await Howl.Play(options));
+    }
+
+    protected async Task PlayAudioWithQuarterVolume()
+    {
+        ErrorMessage = string.Empty;
+        Rate = 1.0;
+
+        var options = new HowlOptions
+        {
+            Sources = new[] { "https://lookandstore.blob.core.windows.net/863da396-6e44-4b3b-8db1-e447d87b121f/instrumental_mp3_637141046337946343_99lfo/instrumental_mp3?sv=2018-03-28&sr=b&sig=96LJ7bycF3lrtiWbVP5tK6%2BOOIJKfq7eYPO%2FjOT72ns%3D&se=2022-10-04T18%3A23%3A53Z&sp=rl" },
+            Formats = new[] { "mp3" },
+            Volume = 0.25
+        };
+
+        SoundIds.Add(await Howl.Play(options));
+    }
+
     protected async Task PlayLoop()
     {
         ErrorMessage = string.Empty;

diff --git a/examples/Howler.Blazor-WASM-AudioPlayer/Pages/Example.razor b/examples/Howler.Blazor-WASM-AudioPlayer/Pages/Example.razor
@@ -19,6 +19,14 @@
             <td><button class="btn btn-primary oi oi-media-play" @onclick="Play3"></button></td>
             <td>Play an audio file with source location and format</td>
         </tr>
+        <tr>
+            <td><button class="btn btn-primary oi oi-media-play" @onclick="PlayAudioWithHalfVolume"></button></td>
+            <td>Play an audio file with source location, format and volume set to half</td>
+        </tr>
+        <tr>
+            <td><button class="btn btn-primary oi oi-media-play" @onclick="PlayAudioWithQuarterVolume"></button></td>
+            <td>Play an audio file with source location, format and volume set to 1 / 4</td>
+        </tr>
         <tr>
             <td><button class="btn btn-primary oi oi-media-play" @onclick="PlayLoop"></button></td>
             <td>Play and loop an audio file</td>
@@ -156,6 +164,36 @@
         SoundIds.Add(await Howl.Play(options));
     }
 
+    protected async Task PlayAudioWithHalfVolume()
+    {
+        ErrorMessage = string.Empty;
+        Rate = 1.0;
+
+        var options = new HowlOptions
+        {
+            Sources = new[] { "https://lookandstore.blob.core.windows.net/863da396-6e44-4b3b-8db1-e447d87b121f/instrumental_mp3_637141046337946343_99lfo/instrumental_mp3?sv=2018-03-28&sr=b&sig=96LJ7bycF3lrtiWbVP5tK6%2BOOIJKfq7eYPO%2FjOT72ns%3D&se=2022-10-04T18%3A23%3A53Z&sp=rl" },
+            Formats = new[] { "mp3" },
+            Volume = 0.5
+        };
+
+        SoundIds.Add(await Howl.Play(options));
+    }
+
+    protected async Task PlayAudioWithQuarterVolume()
+    {
+        ErrorMessage = string.Empty;
+        Rate = 1.0;
+
+        var options = new HowlOptions
+        {
+            Sources = new[] { "https://lookandstore.blob.core.windows.net/863da396-6e44-4b3b-8db1-e447d87b121f/instrumental_mp3_637141046337946343_99lfo/instrumental_mp3?sv=2018-03-28&sr=b&sig=96LJ7bycF3lrtiWbVP5tK6%2BOOIJKfq7eYPO%2FjOT72ns%3D&se=2022-10-04T18%3A23%3A53Z&sp=rl" },
+            Formats = new[] { "mp3" },
+            Volume = 0.25
+        };
+
+        SoundIds.Add(await Howl.Play(options));
+    }
+
     protected async Task PlayLoop()
     {
         ErrorMessage = string.Empty;

diff --git a/src/Howler.Blazor/Components/HowlOptions.cs b/src/Howler.Blazor/Components/HowlOptions.cs
@@ -19,11 +19,16 @@ public class HowlOptions
         /// Set to true to force HTML5 Audio.
         /// This should be used for large audio files so that you don't have to wait for the full file to be downloaded and decoded before playing.
         /// </summary>
-        public bool Html5 { get; set; }
-
-        /// <summary>
-        /// Set to true to automatically loop the sound forever.
+        public bool Html5 { get; set; }
+
+        /// <summary>
+        /// Set to true to automatically loop the sound forever.
         /// </summary>
         public bool Loop { get; set; }
+
+        /// <summary>
+        /// The volume of the specific track, from 0.0 to 1.0.
+        /// </summary>
+        public double Volume { get; set; } = 1.0;
     }
 }
diff --git a/src/Howler.Blazor/wwwroot/JsInteropHowl.js b/src/Howler.Blazor/wwwroot/JsInteropHowl.js
@@ -8,6 +8,7 @@ window.howl = {
             format: options.formats,
             html5: options.html5,
             loop: options.loop,
+            volume: options.volume,
 
             onplay: async function (id) {
                 let duration = howl.duration(id);