Question

我在使用rails工作的小型音频播放器项目时出现问题。我按照这里的教程http://code.tutsplus.com/articles/create-a-simple-music-streaming-app-with-ruby-on-rails--net-18437设法使上传，下载，删除功能正常工作。我正在尝试使用动态播放列表功能扩展流式音频功能，使用上传到我的Amazon s3存储桶的曲目。目前，流媒体选项会将音频加载到播放器中，但不会自动开始播放。我想通过单击播放列表中的歌曲标题自动触发播放。我已经在application.js（triggerPlay函数）中添加了一些注释掉的代码，但每次我尝试使用play（）方法自动开始播放时，播放器会在新窗口，中心屏幕和黑色背景中打开，而不是索引页面本身的音频播放器，我希望它。对不起，如果有一些简单的东西，我会失踪。任何帮助非常感谢！

这是核心代码。

的index.html

<table>
<% @songs.each do |song| %>
<tr>
    <td><%= song.key %></td>
    <td><%= link_to "Delete",  "songs/delete/?song=" + song.key, :confirm => 
    'Are you sure you want      to delete ' + song.key + '?' %></td>
    <td><%= link_to "Download", download_url_for(song.key) %></td>
    <td><%= link_to "Torrent", torrent_url_for(song.key) %></td>
    <td><%= link_to "HTML5 Audio", download_url_for(song.key), :class => "html5" %></td>
</tr>
<% end %>
</table>


<!-- HTML5 section element to hold audio player -->
<section id="audio">
<audio id="player" controls></audio>
</section>

的application.js

$(document).ready(function() {
var audioSection = $('section#audio');
$('a.html5').click(function() {
var url = $(this).attr('href');

    var audio = $('<audio>', {
         controls : 'controls'
         //autoplay: 'autoplay'
    });

    //var player = document.getElementById('player')

    $('<source>').attr('src', url).appendTo(audio);
    audioSection.html(audio);
    //triggerPlay();
    return false;

});
/*var triggerPlay = function() {
    var player = document.getElementById('player');
    player.play();
}*/
});

更新：

我最终成功解决了在新窗口中加载音频播放器的主要问题。我删除了教程中Javascript代码中构造的音频HTML元素，并将其替换为var，以存储对页面上音频标记实例的引用。希望我能早点发现那个！然后我只是附加到那个和play（）函数调用工作正常。仍然需要添加动态切换曲目的能力，而无需重新加载页面，因此欢迎任何关于如何改进这些曲目的想法！这是更新的js。

$(document).ready(function() {
  var audioSection = $('section#audio');
  $('a.html5').click(function() {
  var url = $(this).attr('href');

    var player = document.getElementById('player')

    $('<source>').attr('src', url).appendTo(player);
    audioSection.html(player);
    player.play();
    return false;

  });
});

Answer 1

我没有关于这个问题的专家，但在你的代码中我特别注意到这一点：

<%= link_to "HTML5 Audio", download_url_for(song.key),

所以对我来说，当你单击链接时，Javascript确实作为onClick事件的一部分执行，但链接的href设置为实际mp3文件的链接，这意味着该文件随后打开来自链接的href。尝试将链接的href设置为空，然后重试。

在新窗口中停止音频元素打开

1 个答案: