Question

在我看来，安装BGM音乐播放器很时尚。所以我很想在我的网站上安装这种音乐播放器。

http://cyberagent.github.io/boombox.js/demo/single.html

但问题是我在播放音乐时无法刷新或移动到另一页，否则音乐将被切断。

所以这背后的想法基本上是，使用ajax加载超链接的整个html内容，并将当前内容替换为带有新内容的html。

我想到了这样的事情

$（document）.on（＆＃39;点击＆＃39;＆＃39; a＆＃39;，功能（事件）{event.preventDefault（）; $ .ajax（this.href）}）;

或者使用jquery.load来实现这一目标，但是我对当前网络技术的了解远远不够。

我想知道soundcloud是如何成功完成这项工作的。

我也想知道上面的想法是否可以实现我应该如何处理地址变更。它是否跟上超链接的新网址？

或者，即时尝试使用框架集，以便音乐播放器保持在页面顶部而不会刷新，但我想知道是否可以让音乐继续播放但播放器保持在另一个框架集，以便我可以控制音乐。

http://codepen.io/dpeukert/pen/OVZLjo

检查我试图在框架集上安装的音乐播放器。

这是html。

    <audio src="http://gazze.com/demo/Isthislove.mp3"></audio>
<div id="bg">
<div id="original-link">Show the original picture</div>
<div id="load-song">
    <div id="load-song-url">Load a song from an URL</div>
    <div id="load-song-file">Load a song from a file</div>
</div>
<div id="tested">Tested and working in Chrome 43, FF 39, Opera 30, IE 11 and Microsoft Edge.</div>
<div id="credits">
    Made by <a href="http://www.danielpeukert.cz/">Daniel Peukert</a>     for the <a href="https://www.reddit.com/r/DevWars/comments/3ch8uw/devwars_weekly_update_07_jul_2015/">DevWars weekly challenge</a><br>
        <a href="https://dribbble.com/shots/2133799-Is-This-Love-Music-Player">Original Dribble</a> by <a href="http://www.loopim.com/">Amit Keren</a>
  </div>
</div>
<input type="file" accept="audio/*">
<div id="original"></div>
<div id="player">
<div id="albumart"></div>
  <div id="volume">
    <div id="plus">+</div>
    <input type="range" min="0" max="1" value="1" step="0.01">
    <div id="minus">–</div>
  </div>
  <progress max="100" value="0"></progress>
  <input type="range" min="0" max="100" value="0" step="0.5" id="seek">
  <div id="main">
    <div id="times">
      <div id="current">0:00</div>
      <div id="total">0:00</div>
      <div class="clear"></div>
    </div>
    <div id="controls">
      <div id="playpause" title="Play/Pause (Space)"></div>
      <div id="trackinfo">
        <div id="track" title="Is This Love">Is This Love</div>
        <div id="artist" title="Bob Marley">Bob Marley</div>
      </div>
      <div id="buttons">
        <div id="repeat" title="Repeat (R)"></div>
        <div id="rewind" title="Rewind - 10 seconds (←)"></div>
        <div id="forward" title="Forward - 10 seconds (→)"></div>
      </div> <!-- #buttons -->
      <div class="clear"></div>
    </div> <!-- #controls -->
  </div> <!-- #main -->
</div> <!-- #player -->
<div class="shadow"></div>
<div id="loading">Loading...</div>

如果我对如何实现这一点有任何其他想法，请告诉我。非常感谢帮助。

bgm玩家没有被刷新

0 个答案: