Playing audio via an iframe using javascript

Question

I have the following code in abc.jsp

 <% 
 out.write("<script type=\"text/javascript\" src=\"scripts/test.js\"></script>");
 out.write("Here is filename"+sfl);
 out.write(""
        + "<input type=\"button\" id=\"playBt\" value=\"Play Now\" onClick=\"playSound()\" >"
        + "<audio id=\"sound\" preload=\"auto\">"
        + "<source src=\"music.ogg\" type=\"audio/ogg\" />"
        + "<source src=\"music.mp3\" type=\"audio/mpeg\" />"
        + "Your browser does not support the audio element."
        + "</audio>"
      );
out.write("");
%>

Then content above was brought in in a frame in index.jsp

 <iframe id='bgframe' style='display:compact;' src='abc.jsp' width="400" height="200"></iframe>

This JavaScript function is now used - test.js

function playSound() {  
  var frameRef = document.getElementById('bgframe');
  var sound = frameRef.contentWindow.document.getElementById'sound');
  //var sound = frameRef.contentDocument.document.getElementById('sound');
  sound.play();
}

The problem is that, the sound does not play when I click on play button. On the JavaScript console, the system returns null as value of frameRef. Also, I get the following error depending on whether I use contentDocument or contentWindow.

Uncaught TypeError: Cannot read property 'contentDocument'
Uncaught TypeError: Cannot read property 'contentWindow'

I've implemented different solutions but the uncaught typedef error remains.

Please what am I doing wrong here and how can I fix it? Why can't I access elements on frame id=bgframe?

score 1 · Answer 1 · answered Apr 14 '13 at 16:13

1

You are including your test.js in abc.jsp, not in index.jsp so you don't need to refer to iframe, because the script is already running inside it. You only need to make some changes in playSound() function:

function playSound() {  
  var sound = document.getElementById('sound');
  //do your stuff here
  //line below should make your script alert 'auto' in your case
  alert(sound.preload); 
}

answered Apr 14 '13 at 16:13

ghost

769
5
11

test.js is an external javascript. It is not included in abc.jsp. Also, what I intend to do is to be able to play this sound on index.jsp via a frame. When I tested it without frame, everything worked fine, but I need it played via a frame embeded in index.jsp. – bdfios Apr 14 '13 at 16:15
The error points specifically to this line: var sound = frameRef.contentWindow.document.getElementById'sound'); where a null is returned. – bdfios Apr 14 '13 at 16:16
You are including test.js in the second line of abc.jsp `out.write("");`. Your test.js is running in the iframe (in abc.js), not directly in index.jsp. I don't think you understand what are you doing :) First check if my code works for you. – ghost Apr 14 '13 at 16:40
Thanks for your feedback. What you see up here is a snipped of a code that I am trying to implement in a much bigger project. The reason you see that I am calling abc.jsp in index.jsp via an iframe is that, at the end of the day, my code may run on a different domain, but I will only give the iframe line of code to clients to put on their web site. In that way, I am letting my test.js to be included in abc.jsp so that only one line of code loads both my javascript and jsp. I don't want to give the client many lines of code. I just found a solution. – bdfios Apr 14 '13 at 17:58
This link (http://stackoverflow.com/questions/5371047/getelementbyid-returns-null-even-though-the-element-exists?rq=1) gave me some insight. It was there I found out that I was calling playSound() before the DOM is fully loaded. Now it is working after I placed my code in window.onload = function(){... – bdfios Apr 14 '13 at 18:00

Playing audio via an iframe using javascript

1 Answers1