Почему на этой странице не отображается пользовательский интерфейс проигрывателя аудио?

Question

Я пишу web app, который, как предполагается, чтобы отобразить следующие вещи на определенной странице:

1. AudioJS игрока
2. Обратная панель (оценка и комментарий)

Я хочу проигрывателю перед панелью обратной связи.

Если я поместил следующий код в этот page, появится аудиоплеер.

Код:

<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" />´ 

Результат:

Но когда я изменить код так, что аудиоплеер появляется до панель обратной связи, затем исчезает.

Код:

<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> 

Результат:

Как я могу исправить это (сделать аудиоплеер появляются перед формой обратной связи)?

Answer 1

Mb проблема <audio> требует закрытия тега.