[SOLVED] Why does this code work on a separate file but not inline

Why does this code work on a separate file but not inline

This question may seem silly, but I really can't find out what the problem is. Initially I have a .js file only with this function that adds an audio to the page:

function addAudio(id_name, audio_filepath) {
  var audio = $('<audio />')
                .prop('id', 'audio' + id_name)
                .prop('src', audio_filepath)
                .text("Your reader doesn't support audio.");

  $('body').append(audio);

  $('#' + id_name).click(function () {
    audio.get(0).play();
  });
}

And it's being called in the html like this:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
  <!-- some content here -->
  <button id="test">Play</button>

  <!-- reference to lib containing jquery -->
  <script type="text/javascript" src="js/lib.min.js"></script>

  <!-- script where the function addAudio resides -->
  <script type="text/javascript" src="js/add-audio.js"></script>

  <script type="text/javascript">
    $().ready(function() {
      addAudio('test', 'audio/01-test.wav');
    });
  </script>
</body>
</html>

And that works fine. The problem is when I try to move the function out of the file and put it inline in the script tag. In that case, when I click the button, the console prints Uncaught TypeError: Cannot read property 'play' of undefined.

This is the modified code:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
  <!-- some content here -->
  <button id="test">Play</button>

  <!-- reference to lib containing jquery -->
  <script type="text/javascript" src="js/lib.min.js"></script>

  <script type="text/javascript">
    function addAudio(id_name, audio_filepath) {
      var audio = $('<audio />')
                    .prop('id', 'audio' + id_name)
                    .prop('src', audio_filepath)
                    .text("Your reader doesn't support audio.");

      $('body').append(audio);

      $('#' + id_name).click(function () {
        audio.get(0).play();
      });
    }

    $().ready(function() {
      addAudio('test', 'audio/01-test.wav');
    });
  </script>
</body>
</html>

Trying to isolate the error, I found out that when the function is in the .js file, the variable audio is a jquery object [audio#audiotest], but when the function is inline, that variable is the object n.fn.init {}.

Why does that happen?

EDIT

I've noticed that that happens because it's in a xhtml file (I'm making an ebook in epub3 format). If I change the file to html it works again. But that is odd, because audio tags are supported in xhtml (you can check the specification here: http://www.idpf.org/accessibility/guidelines/content/xhtml/audio.php), and like I said, it works if the function is in a separate file. So why inline does not?

Solution

I found the answer, people. Thank you all for your attention and help, and sorry for the inconvenience. I was thinking about deleting this question, but I'm going to answer it to help those who might pass through the same thing.

According to Mozilla Foundation, using inline javascript in XHTML is troublesome: (https://developer.mozilla.org/en-US/docs/Archive/Web/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents_/Examples#Example_1)

JavaScript typically contains characters which can not exist in XHTML outside of CDATA Sections.

So I solved the problem changing the line $('<audio />') to $('&t;audio /gt;')