Html 如何让 <audio> 文件在所有页面上连续播放？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15612120/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make an <audio> file play continuously on all pages?
提问by Joshua Baker
I am wondering how I make get an audio file to play 'continuously' on all pages. So if the audio file has played for 20 seconds, then when navigating on another page it will continue from where it left off. I also am trying to get the volume to decrease after navigating away from my home page. Any tips or advice would me appreciated! Thanks =D
我想知道如何让音频文件在所有页面上“连续”播放。因此，如果音频文件已经播放了 20 秒，那么在另一个页面上导航时，它将从上次停止的地方继续播放。我也试图在离开我的主页后降低音量。任何提示或建议将不胜感激！谢谢=D
<audio src="songforsite.mp3" loop="true" autoplay="true" controls>
Unsupported in Firefox
</audio>
回答by
Yes, it is possible. try this:
对的，这是可能的。尝试这个：
<audio preload="auto" src="a.mp3" loop="true" autobuffer>
Unsupported in Firefox
</audio>
<script>
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
var song = document.getElementsByTagName('audio')[0];
var played = false;
var tillPlayed = getCookie('timePlayed');
function update()
{
if(!played){
if(tillPlayed){
song.currentTime = tillPlayed;
song.play();
played = true;
}
else {
song.play();
played = true;
}
}
else {
setCookie('timePlayed', song.currentTime);
}
}
setInterval(update,1000);
</script>
回答by CBroe
If you really navigate to another page, then you will not get really continuous playback.
如果您真的导航到另一个页面，那么您将无法获得真正的连续播放。
There are three common approaches:
常见的方法有以下三种：
- open your audio player in a popup
- frames: one main frame for your page to display in, a small frame for the audio player
- not really navigating to other pages, but do everything with AJAX and thereby not actually reloading the page, but only changing parts of the document structure dynamically; maybe adding real link functionality including changing the address bar by using the HTML5 History API
- 在弹出窗口中打开您的音频播放器
- 框架：一个用于显示页面的主框架，一个用于音频播放器的小框架
- 不是真正导航到其他页面，而是使用 AJAX 做所有事情，因此实际上不会重新加载页面，而只是动态更改文档结构的部分；也许添加真正的链接功能，包括使用 HTML5 History API 更改地址栏
All approaches have their pros/cons. Popup is maybe the easiest to implement, and has the least drawbacks (compared to frames).
所有方法都有其优点/缺点。弹出窗口可能是最容易实现的，并且缺点最少（与框架相比）。
I also am trying to get the volume to decrease after navigating away from my home page.
我也试图在离开我的主页后降低音量。
Then catch any clicks on your “home” link/button, and call the volumemethod of the audioelement with a parameter value ranging from 0 to 1 to set the volume.
然后捕捉对“主页”链接/按钮的任何点击，并调用参数值范围为 0 到 1volume的audio元素的方法来设置音量。
回答by Mohamed Emad Hegab
well .. a clean and neat way to do it , is the way that soundcloud.com and spoify.com made through ajaxifing all the pages
嗯.. 一种干净整洁的方法，是 soundcloud.com 和 spoify.com 通过 ajaxifing 所有页面的方式
fix a page and change the pages content through ajax ,and change the url as well to give the user the illusion of navigating this is not the easiest or fastest solution ,but it's the cleanest one ..far away from the fear of browsers incompatibilities
修复页面并通过 ajax 更改页面内容，并更改 url 以给用户导航的错觉 这不是最简单或最快的解决方案，但它是最干净的解决方案......远离对浏览器不兼容的恐惧
