如何在Shiny App中嵌入Spotify艺人/播放列表？嵌入失败求助

以下是几个实用的解决方案，按优先级尝试：

方案1：直接使用HTML()插入原始iframe代码 #

tags$iframe有时会在属性转换上出现兼容性问题，直接用HTML()插入Spotify提供的原始嵌入代码更可靠：

library(shiny)

ui <- navbarPage(title = "Player",
                 tabPanel(id = "tab", 
                          title = strong("The Temptations"), 
                          icon = icon("info-circle"),
                          sidebarLayout(
                            sidebarPanel(),
                            mainPanel(
                              HTML('<iframe style="border-radius:12px" src="https://open.spotify.com/embed/artist/3RwQ26hR2tJtA8F9p2n7jG?utm_source=generator" width="100%" height="380" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>')
                            )
                          ))
)

server <- function(input,output,session){}

shinyApp(ui,server)

方案2：修正tags$iframe的属性写法 #

如果坚持使用tags$iframe，需注意HTML属性的大小写和空值处理规则：

• HTML属性frameborder为全小写（而非驼峰式的frameBorder）
• 空属性（如allowfullscreen=""）在Shiny中需用NA表示

修正后的代码：

library(shiny)

ui <- navbarPage(title = "Player",
                 tabPanel(id = "tab", 
                          title = strong("The Temptations"), 
                          icon = icon("info-circle"),
                          sidebarLayout(
                            sidebarPanel(),
                            mainPanel(
                              tags$iframe(
                                style = "border-radius:12px",
                                src = "https://open.spotify.com/embed/artist/3RwQ26hR2tJtA8F9p2n7jG?utm_source=generator",
                                width = "100%",
                                height = "380",
                                frameborder = "0",
                                allowfullscreen = NA,
                                allow = "autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture",
                                loading = "lazy"
                              )
                            )
                          ))
)

server <- function(input,output,session){}

shinyApp(ui,server)

方案3：添加内容安全策略（CSP）头 #

如果前两个方案无效，可能是Shiny默认的CSP规则阻止了Spotify资源加载，可通过添加CSP头允许iframe加载Spotify内容：

library(shiny)

ui <- navbarPage(title = "Player",
                 tags$head(
                   tags$meta(
                     httpEquiv = "Content-Security-Policy",
                     content = "frame-src https://open.spotify.com; default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *;"
                   )
                 ),
                 tabPanel(id = "tab", 
                          title = strong("The Temptations"), 
                          icon = icon("info-circle"),
                          sidebarLayout(
                            sidebarPanel(),
                            mainPanel(
                              HTML('<iframe style="border-radius:12px" src="https://open.spotify.com/embed/artist/3RwQ26hR2tJtA8F9p2n7jG?utm_source=generator" width="100%" height="380" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>')
                            )
                          ))
)

server <- function(input,output,session){}

shinyApp(ui,server)

额外排查点 #

• 按F12打开浏览器控制台，查看是否有CSP报错或资源加载失败的具体提示
• 确认网络环境可正常访问https://open.spotify.com，排除代理、防火墙等限制

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