Why isn't audio player UI displayed on this page?

Question

I'm writing a web app, which is supposed to display following things on a certain page:

1. AudioJS player
2. Feedback panel (grade and comment)

I want the player to appear before the feedback panel.

If I put the following code into that page, the audio player is displayed.

Code:

<h2><%= I18n.t(:home_title) %></h2>
<script src="/audiojs/audio.min.js"></script>
<script>
  audiojs.events.ready(function() {
    var as = audiojs.createAll();
  });
</script>
<h3><%= I18n.t(:playback_feedback_title) %></h3>
<%= I18n.t(:playback_feedback_body) %>
<form action="/<%= I18n.locale %>/save_feedback" method="post">
    <%= I18n.t(:playback_rating) %>
    <select name="grade">
      <option value="0"><%= I18n.t(:playback_rating_0) %></option>
      <option value="1"><%= I18n.t(:playback_rating_1) %></option>
      <option value="2"><%= I18n.t(:playback_rating_2) %></option>
      <option value="3"><%= I18n.t(:playback_rating_3) %></option>
      <option value="4"><%= I18n.t(:playback_rating_4) %></option>
      <option value="5"><%= I18n.t(:playback_rating_5) %></option>
    </select>
    <br/>
    <%= I18n.t(:playback_comment) %>
    <br/>
    <textarea name="comment" rows="5" cols="50">
    </textarea>
    <br/>
    <input type="hidden" name="person_id" value="<%= @person_id.to_s %>">
    <input type="hidden" name="song_id" value="<%= @songId %>"> 
    <br/>
    <input type="submit" value="<%= I18n.t(:playback_submit) %>">
</form>
<audio src="<%= @songPath %>" preload="auto" />´

Result:

But when I change the code so that the audio player appears before the feedback panel, the latter disappears.

Code:

<h2><%= I18n.t(:home_title) %></h2>
<script src="/audiojs/audio.min.js"></script>
<script>
  audiojs.events.ready(function() {
    var as = audiojs.createAll();
  });
</script>
<audio src="<%= @songPath %>" preload="auto" />
<h3><%= I18n.t(:playback_feedback_title) %></h3>
<%= I18n.t(:playback_feedback_body) %>
<form action="/<%= I18n.locale %>/save_feedback" method="post">
    <%= I18n.t(:playback_rating) %>
    <select name="grade">
      <option value="0"><%= I18n.t(:playback_rating_0) %></option>
      <option value="1"><%= I18n.t(:playback_rating_1) %></option>
      <option value="2"><%= I18n.t(:playback_rating_2) %></option>
      <option value="3"><%= I18n.t(:playback_rating_3) %></option>
      <option value="4"><%= I18n.t(:playback_rating_4) %></option>
      <option value="5"><%= I18n.t(:playback_rating_5) %></option>
    </select>
    <br/>
    <%= I18n.t(:playback_comment) %>
    <br/>
    <textarea name="comment" rows="5" cols="50">
    </textarea>
    <br/>
    <input type="hidden" name="person_id" value="<%= @person_id.to_s %>">
    <input type="hidden" name="song_id" value="<%= @songId %>"> 
    <br/>
    <input type="submit" value="<%= I18n.t(:playback_submit) %>">
</form>

Result:

How can I fix it (make the audio player appear before the feedback form) ?

Answer 1

Mb problem is <audio> requires closing tag.