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

【问题标题】：Stop audio element opening in new window停止在新窗口中打开的音频元素
【发布时间】：2014-05-01 18:45:30
【问题描述】：

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

这里是核心代码。

索引.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>

应用程序.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;

  });
});

【问题讨论】：

标签： javascript ruby-on-rails html audio streaming

【解决方案1】：

我不是这方面的专家，但在你的代码中我特别注意到这一点：

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

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

【讨论】：