logo标签列表

持续播放带有歌曲名称的音乐

javascriptjqueryhtmlhtml5-audioaudio-player
9

我实际上可以使用框架（frames）在页面加载时持续播放音乐而无需重新加载，（我知道持续播放音乐并不是一个好主意，但客户真的要求这样做，所以我别无选择）。以下是我用于播放音乐的框架：

<body>
    <div id="player">
    <audio id="audio" controls="controls" autoplay="autoplay" loop="loop" style="width:150px;">
      <source src="martnalia05namoracomigo.ogg" type="audio/ogg" />
      <source src="martnalia05namoracomigo.mp3" type="audio/mp3" />
      <embed src="martnalia05namoracomigo.mp3" hidden="true" loop="TRUE" autostart="TRUE"></embed>
    </audio>
    </div>
</body>

我只是为了测试而插入了这首音乐，我想知道是否可以制作播放列表，并且是否可以通过链接和按钮来跳过当前正在播放的音乐，例如：

[player]
| button previous  | button to play/pause | button next
| name of the music (link to the page of the Album) | 
[end of player]

有任何建议吗？
你不需要使用框架 - 你可以让你的内容容器通过 AJAX 异步获取数据并以此方式填充。BackboneJS 和 Spine 都是这种 Web 应用程序的绝佳解决方案。 - AlienWebguy
我不确定能否使用它，因为我实际上正在使用预制基础来建立我的网站，我正在使用的是：jumpseller.com，我的网站是这个：http://biscoitofino.jumpseller.com/。由于我对代码的访问权限有限，我不知道是否可以在该系统中编辑导航。我的想法是在上方的框架中使用音乐播放器，在下方的框架中使用真正的网站内容。 - Leo Ramos
这是什么网站？我想确保我永远不会去它。 - Joe
我个人认为可以考虑使用单页应用框架来实现这一点。 - Kieran Devlin
2个回答
1

如果您想制作一个小型媒体播放器，那么有很多现成的脚本可用来帮助您实现这一目标（Google是您的好朋友）。

如果您决定自己动手制作，以下是我的建议，它们可能会帮助您朝着正确的方向前进。

var data = [{audiourl: "filename1.mp3", artisturl:"http://example.com",name:"Song name"},
            {audiourl: "filename1.mp3", artisturl:"http://example.com",name:"Song name"}];

一种用于存储曲目细节的数据结构。

var audio = document.getElementById("audio");
audio.addEventListener('ended', playNext);

终于有一种函数来处理曲目的切换了

var currentTrack = 0;
function playNext(options){
    currentTrack++;
    if (currentTrack > data.length){
        currentTrack = 0;
    }
    var audiosrc = document.getElementById('embed_element_id') // or some other selector method
    audiosrc.src = data[currentTrack].audiourl;
    audiosrc.play();
}

我对HTML5音频规范不是完全确定，但我认为它应该是这样的。

希望这可以帮到你。

0
你好，感谢你的回答Jim。那么告诉我，你认为在我的情况下（考虑到我无法使用AJAX系统），有比使用框架更好的选择来持续播放音乐吗？ - Leo Ramos
考虑到您无法定制页面以添加一些JavaScript，我认为您唯一的选择就是坚持使用框架。 - gfyans
如果您没有这么受限制，您可以选择单页应用程序路线，http://en.wikipedia.org/wiki/Single-page_application，因此页面永远不会刷新，当用户点击导航中的链接时，只请求新内容。 您的媒体播放器始终保持开启状态。在 hypem.com 的源代码中查找一下，我不确定它们是如何在没有使用＃的情况下更改其URL的（单页应用程序不是我的专长），但这样做效果很好。顺便问一下，为什么您不能使用AJAX？ 如果您无法向站点添加JS，则无法使用LeanBack。 - gfyans
我快速地搜索了一下，看起来Hypem正在使用HTML5 pushState技术来处理URL - http://badassjs.com/post/840846392/location-hash-is-dead-long-live-html5-pushstate - gfyans
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接