Do you have an example on how to control the volume of an HTML5 Audio Element?

inglesuniversal commented 6 years ago

I would like to use it for both, the web and a phonegap ambient sound player

Thanks

andreruffert commented 6 years ago

I don't have an example doin this but it's definitely possible. You only need to dynamically set the max attribute based on the duration and update the value based on the player state.

tiesont commented 6 years ago

Not all that hard: https://jsfiddle.net/n3ch6dmo/19/

Markup:

<blockquote>
30 second sample from "Another Day in Paradise", 
<cite>by Phil Collins, from the Collins album, "...But Seriously".</cite>
</blockquote>
<p>
    <audio id="sample-audio" controls>
        <source type="audio/ogg" src="https://upload.wikimedia.org/wikipedia/en/9/9f/Sample_of_%22Another_Day_in_Paradise%22.ogg" />
        Your browser does not support the <code>audio</code> element.
    </audio>
</p>
<input type="range" min="0" max="1.0" step="0.01" value="0.5" id="volume-slider" />

JavaScript:

$('#volume-slider').rangeslider({ polyfill: false });

$('#volume-slider').on('change', function(e) {
  var volume = $(this).val();
  $('#sample-audio')[0].volume = volume;
})

All you need to do is read the current value of the range input, and then set the volume value appropriately. This is just reading the range value, so it's not really specific to rangeslider.js.

inglesuniversal commented 6 years ago

AWESOME PROJECT!!! I loaded it into an EXPO app and it works BEAUTIFULLY on Android Motorola Cellphone (KUDOS for THAT!!!) ... Now... On my iPhone 8, I hear the song (which I changed to an MP3 filepath), but it does NOT affect the volume when sliding the RangeSlider tab/bar.

Any ideas on how to make it work.... This would be the equivalent to WEBVIEW....

I hope you guys can help tackle this issue!

tiesont commented 6 years ago

If I recall correctly, iOS/Webkit has some tighter restrictions with how they allow you to interact with media. You might not be able to change the volume on an iPhone.

I have no idea what has changed since it was published, but this seems to confirm what I was suspecting: https://www.ibm.com/developerworks/library/wa-ioshtml5/

andreruffert / rangeslider.js

Do you have an example on how to control the volume of an HTML5 Audio Element? #305