Question

我想知道如何在所有页面上“连续”播放音频文件。因此，如果音频文件播放了20秒，那么当在另一个页面上导航时，它将从它停止的位置继续播放。我也试图在离开我的主页后减少音量。任何提示或建议我都会感激！谢谢= D

<audio src="songforsite.mp3" loop="true" autoplay="true" controls>
Unsupported in Firefox
</audio>

Answer 1

是的，有可能。试试这个：

<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>

Answer 2

如果你真的导航到另一个页面，那么你将无法真正连续播放。

有三种常见的方法：

在弹出窗口中打开您的音频播放器
frames：用于显示页面的一个主框架，一个用于音频播放器的小框架
并没有真正导航到其他页面，而是使用AJAX完成所有操作，从而实际上没有重新加载页面，而只是动态地更改文档结构的各个部分;可能会添加真正的链接功能，包括使用HTML5 History API更改地址栏

所有方法都有其优点/缺点。 Popup可能是最容易实现的，并且具有最少的缺点（与帧相比）。

我也试图在离开我的主页后减少音量。

然后抓住对“home”链接/按钮的任何点击，并调用volume元素的audio方法，参数值范围为0到1以设置音量。

Answer 3

嗯......一个干净利落的方式来实现它，是soundcloud.com和spoify.com通过ajaxifing所有页面的方式

修复页面并通过ajax更改页面内容，并更改网址以给用户带来导航的错觉这不是最简单或最快的解决方案，但它是最干净的解决方案..远离对浏览器不兼容性的恐惧

如何在所有页面上连续播放<audio>文件？</audio>

3 个答案: