Next js 网站一旦我离开 iphone 中的 safari，音频就会停止播放，即使 safari 在后台运行

Question

我的问题是我的网站音频没有在 iphone 和 ios 的后台运行，但我看到所有其他网站都在主屏幕中获取小部件，并且即使我离开 safari 也在后台运行。供您参考，音频确实在用户交互时播放，我不是在谈论自动播放。

我想知道如何实现音频的后台播放，即使我将 Safari 留在 iPhone 上。我正在使用 next js，为播放器使用声音和嚎叫声，有人知道如何做到这一点吗？.

播放器功能（例如播放、搜索、暂停）一切都按预期运行。在互联网上搜索之后，我得到了一些线索，比如添加这个，但它不起作用，或者也许我不明白

 document.addEventListener('visibilitychange',() => {
 sound?.pause()
      sound?.play()   

})

还有这个

   
   let userPaused = false;

   player.on('pause', () => {
   userPaused = Boolean(player.userActive());
   });

   player.on('playing', () => {
     userPaused = false;
   });

   document.addEventListener('visibilitychange', function () {
     if (document.visibilityState === 'hidden' && !userPaused) {
       try {
         player.play();
       } catch (e) {
         console.warn('Cannot play video while page is hidden.', e);
       }
     }
   });

有人可以帮我吗？或者给我指出正确的方向

Answer 1

我已经使用此代码解决了这个问题

    const Javascriptmenu: React.FC<JavascriptProps> = ( {
     id
    }) => {

    const javascriptMenuRef = useRef<HTMLDivElement>(null)

    const script = 
    `
    
    <script id={${id}>
    { 
    
     var disqus_config = function () {
     this.page.url = document.location.href;  // Replace PAGE_URL with 
     your page's canonical URL variable
     this.page.identifier = ${id}; // Replace PAGE_IDENTIFIER with your 
     page's unique identifier variable
 
     };
     (function() { // DON'T EDIT BELOW THIS LINE
     var d = document, s = d.createElement('script');
     s.src = 'https://Yoururlhere.disqus.com/embed.js';
     s.setAttribute('data-timestamp', +new Date());
     (d.head || d.body).appendChild(s);
     })();
     
     
     }
 </script>
 `

 useEffect(() => {
    /* Clear out the loaded script's on component's un-mount */
    return () => {
        document.getElementById(`${id}`)?.remove()
        document.getElementById('s_load_loader')?.remove()
        document.getElementById(`${id}-s15dasboard`)?.remove()
        document.getElementById(`${id}-universal`)?.remove()
    }

    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

useEffect(() => {
    if (id) {
        // creates a document range (grouping of nodes in the document). In this case, we instantiate it as empty, on purpose
        const range = document.createRange()
        // creates a mini-document (lightweight version), in our range with our script in it
        const documentFragment = range.createContextualFragment(script)
        // appends it on the same level of annex div - so that it renders in the correct location
        javascriptMenuRef.current?.appendChild(documentFragment)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [id])
 
    return ( 
       <> 
       <div id="disqus_thread"></div>
       <div ref={javascriptMenuRef}>
       <div id={ `${id}-s15dasboard` }/>
       </div>

       <noscript>Please enable JavaScript to view the <a 
       href="https://disqus.com/?ref_noscript">comments powered by 
       Disqus.</a>
       </noscript>
       </>

     );
  }
 
export default Javascriptmenu;