How to change music volume in iframe?

Viewed 3565

This is my code, I want to add the volume controller in this code. This code is embedded in Microsoft Sway. It is from Sound Cloud.

<iframe width="1%" height="1" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/590509653&color=%23ff5500&auto_play=true&hide_related=false&show_comments=false&show_user=false&show_reposts=false&show_teaser=false&visual=false"></iframe><div style="font-size: 1px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 1;"><a href="https://soundcloud.com/joakimkarud" title="  " target="_blank" style="color: #cccccc; text-decoration: none;">  </a> · <a href="https://soundcloud.com/joakimkarud/harmony" title="  " target="_blank" style="color: #cccccc; text-decoration: none;">  </a></div>

1 Answers

This can be done using the setVolume() method - HTMLIFrameElement. And you can do it with this example:

html

<script src="http://w.soundcloud.com/player/api.js" type="text/javascript"></script>
        
<iframe width="1%" height="1" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/482221002%3Fsecret_token%3Ds-ahwqc&color=%23577c5d&inverse=false&auto_play=true&show_user=true"></iframe>

js

let audio_iframe = document.querySelector('iframe');

widget = SC.Widget(audio_iframe);
widget.setVolume(0.9);

You can read the description here.

Related