Can audio data from an , such as a YouTube video or embedded music player, be accessed with JavaScript?</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2020-10-22T21:19:54.817" class="fromnow">Oct 22 '20 at 21:19</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2020-10-24T12:45:48.270" datetime="2020-10-24T12:45:48.270">Oct 24 '20 at 12:45</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 1,597 times"> <span class="fc-light mr2">Viewed</span> 1,597 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="64490694" data-ownerid="14502836" data-score="2"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="64490694"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="2">2</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value="0">0</div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I am embedding various players on my webpage (YouTube, Spotify, Bandcamp etc.) and would like to change my webpage's state based on the embedded sound. How can this data be accessed?</p> <p>UPDATE: From <a href="../../users/989920/evolutionxbox">evolutionxbox</a> 's comment, I looked into the element of one of the Bandcamp embedded players, and found the below:</p> <pre><code> <script type="text/javascript"> var playerdata = {"tracks":[{"title":"Virga I","encodings_id":1606233426,"file":{"mp3-128":"https://t4.bcbits.com/stream/..... var parentpage = "http://localhost:8080/"; // page we are embedded in var params = {"tracklist":"false","fgcol":null,"url_referrer":false... $(function() { HTMLEmbeddedPlayer3.init(playerdata, parentpage, params); }); </script> </code></pre> <p>This is cool, because I may be able to see this iframe's "playerdata" var programmatically, and access the audio when the user clicks play? I'll be giving it a try.</p> <p><a class="external-link" href="https://i.stack.imgur.com/ABK2Y.png" rel="nofollow noreferrer"><img alt="Bandcamp embeds screenshot" src="../../images/3783330867.webp"/></a></p> <p>EXTRA:</p> <p>I also found this helpful thread: <a href="../../questions/27535244/is-there-anyway-to-visualize-youtube-audio-from-an-iframe-using-the-web-audio-">Is there anyway to visualize youtube audio from an iframe using the web audio api?</a></p> <p>However this solves for only YouTube. Other services (and I'm mainly looking at Bandcamp here) don't have an API to stream the audio, so it would have to be from the iframe itself.</p> <p>Since the audio is playing on the site it seems there ought to be some way to intercept between the media service and the user, but right now I'm not seeing it.</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/embed" class="post-tag js-gps-track" title="show questions tagged 'embed'" rel="tag">embed</a> <a href="../../questions/tagged/html5-audio" class="post-tag js-gps-track" title="show questions tagged 'html5-audio'" rel="tag">html5-audio</a> <a href="../../questions/tagged/audio-player" class="post-tag js-gps-track" title="show questions tagged 'audio-player'" rel="tag">audio-player</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2020-10-24T12:45:48.270" class="relativetime">Oct 24 '20 at 12:45</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">recholsknauber</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Oct 22 '20 at 21:19">asked Oct 22 '20 at 21:19</time> <a href="../../users/14502836/recholsknauber" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/14502836.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="recholsknauber" /> </a> <div class="s-user-card--info"> <a href="../../users/14502836/recholsknauber" class="s-user-card--link">recholsknauber</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">31</li> <li class="s-award-bling s-award-blingbronze" title="3 bronze badges">3</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-64490694" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="64490694" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-114034676" class="comment js-comment " data-comment-id="114034676" data-comment-owner-id="9515207" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment114034676_64490694"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Maybe, if the different sites provide APIs for such things. The more popular sites sometimes do.</span> – <a href="../../users/9515207/certainperformance" title="356,069 reputation" class="comment-user ">CertainPerformance</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/64490694/can-audio-data-from-an-iframe-such-as-a-youtube-video-or-embedded-music-player#comment114034676_64490694"><span title="2020-10-22T21:20:37.490 License: CC BY-SA 4.0" class="relativetime-clean">Oct 22 '20 at 21:20</span></a></span> </div> </div> </li> <li id="comment-114036162" class="comment js-comment " data-comment-id="114036162" data-comment-owner-id="989920" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment114036162_64490694"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I think the domains need to be the same?</span> – <a href="../../users/989920/evolutionxbox" title="3,932 reputation" class="comment-user ">evolutionxbox</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/64490694/can-audio-data-from-an-iframe-such-as-a-youtube-video-or-embedded-music-player#comment114036162_64490694"><span title="2020-10-22T22:44:30.713 License: CC BY-SA 4.0" class="relativetime-clean">Oct 22 '20 at 22:44</span></a></span> </div> </div> </li> <li id="comment-114036179" class="comment js-comment " data-comment-id="114036179" data-comment-owner-id="989920" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment114036179_64490694"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Does this answer your question? [Invoking JavaScript code in an iframe from the parent page](https://stackoverflow.com/questions/251420/invoking-javascript-code-in-an-iframe-from-the-parent-page)</span> – <a href="../../users/989920/evolutionxbox" title="3,932 reputation" class="comment-user ">evolutionxbox</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/64490694/can-audio-data-from-an-iframe-such-as-a-youtube-video-or-embedded-music-player#comment114036179_64490694"><span title="2020-10-22T22:45:44.057 License: CC BY-SA 4.0" class="relativetime-clean">Oct 22 '20 at 22:45</span></a></span> </div> </div> </li> <li id="comment-114036193" class="comment js-comment " data-comment-id="114036193" data-comment-owner-id="989920" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment114036193_64490694"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">And also https://stackoverflow.com/questions/1600488/calling-javascript-function-in-iframe</span> – <a href="../../users/989920/evolutionxbox" title="3,932 reputation" class="comment-user ">evolutionxbox</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/64490694/can-audio-data-from-an-iframe-such-as-a-youtube-video-or-embedded-music-player#comment114036193_64490694"><span title="2020-10-22T22:46:53.993 License: CC BY-SA 4.0" class="relativetime-clean">Oct 22 '20 at 22:46</span></a></span> </div> </div> </li> <li id="comment-114036636" class="comment js-comment " data-comment-id="114036636" data-comment-owner-id="14502836" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment114036636_64490694"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Thank you @evolutionxbox ! These led me in a good direction and I updated the post. Found a function when inspecting the embedded element that I may be able to call.</span> – <a href="../../users/14502836/recholsknauber" title="31 reputation" class="comment-user owner">recholsknauber</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/64490694/can-audio-data-from-an-iframe-such-as-a-youtube-video-or-embedded-music-player#comment114036636_64490694"><span title="2020-10-22T23:24:22.143 License: CC BY-SA 4.0" class="relativetime-clean">Oct 22 '20 at 23:24</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">1 Answers<span style="display:none;" itemprop="answerCount">1</span></h2> </div> </div> </div> <a name="64491937"></a> <div id="answer-64491937" class="answer " data-answerid="64491937" data-ownerid="362536" data-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="64491937"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>No, this is not possible, for security reasons.</p> <p>Content of different origins will not be accessible.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Oct 22 '20 at 23:36">answered Oct 22 '20 at 23:36</time> <a href="../../users/362536/brad" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/362536.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Brad" /> </a> <div class="s-user-card--info"> <a href="../../users/362536/brad" class="s-user-card--link">Brad</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">159,648</li> <li class="s-award-bling s-award-blinggold" title="54 gold badges">54</li> <li class="s-award-bling s-award-blingsilver" title="349 silver badges">349</li> <li class="s-award-bling s-award-bling__bronze" title="530 bronze badges">530</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>