如何通过JS的Cookie/LocalStorage按访问次数切换SoundCloud播放列表？

完全可以做到！用LocalStorage来记录用户的访问次数是最合适的选择（它比Cookie更轻量化，专门用来存储客户端的非敏感数据），我给你写了一套完整的代码，每一步都加了注释，你直接复制到项目里就能用，还会给你讲清楚逻辑～

实现步骤&代码示例 #

首先，你需要先准备好三个SoundCloud播放列表的嵌入地址（就是你平时嵌入用的iframe的src属性值），然后按下面的步骤来：

1. HTML结构（先留个播放容器）

<!-- 这个div用来放SoundCloud播放列表 -->
<div id="soundcloud-player-container"></div>

2. JavaScript逻辑（核心部分）

// 第一步：定义你的三个播放列表的嵌入地址
const playlists = [
  "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/PLAYLIST_ID_1&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true",
  "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/PLAYLIST_ID_2&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true",
  "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/PLAYLIST_ID_3&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
];

// 第二步：从LocalStorage读取访问次数，第一次访问的话默认是0
let visitCount = parseInt(localStorage.getItem("soundcloud_visit_count")) || 0;

// 第三步：计算当前应该播放第几个列表（循环逻辑：1→2→3→1...）
// 用取模运算：访问次数对3取余，得到0/1/2，对应三个列表的索引
const currentPlaylistIndex = visitCount % 3;
const currentPlaylistUrl = playlists[currentPlaylistIndex];

// 第四步：动态创建SoundCloud的iframe并插入到页面里
const playerContainer = document.getElementById("soundcloud-player-container");
const iframe = document.createElement("iframe");
iframe.src = currentPlaylistUrl;
iframe.width = "100%";
iframe.height = "300"; // 可以根据你的需求调整高度
iframe.frameBorder = "0";
iframe.allow = "autoplay"; // 必须加这个才能自动播放（注意浏览器的自动播放政策）
playerContainer.appendChild(iframe);

// 第五步：更新访问次数，存回LocalStorage（下次访问就会用新的次数）
visitCount++;
localStorage.setItem("soundcloud_visit_count", visitCount.toString());

关键细节说明 #

• 自动播放注意事项：现在主流浏览器都有自动播放限制，必须满足「用户和页面有交互」或者「媒体是静音的」才能自动播放。如果你的播放列表没静音，可能第一次访问不会自动播，这时候可以给iframe的src加上&auto_play=true&muted=true，或者提示用户点击一下页面再播放。
• LocalStorage的特点：数据会一直存在用户的浏览器里，除非用户手动清除缓存或者你用代码删除。如果想让用户关闭浏览器后重置次数，可以换成sessionStorage，但那样每次打开新窗口都会从playlist1开始。
• Cookie备选方案：如果必须用Cookie（比如要兼容极老的浏览器），逻辑差不多，只是读取和写入Cookie的代码不一样，需要的话我可以给你改。

替换成你自己的播放列表 #

把代码里的PLAYLIST_ID_1、PLAYLIST_ID_2、PLAYLIST_ID_3换成你自己的SoundCloud播放列表ID就行，你可以从SoundCloud的嵌入代码里找到这个ID～

内容的提问来源于stack exchange，提问作者Jones