如何自动暂停其他音频播放器并仅播放在 Wix 网站上选择的音频播放器？

Question

所以在我的网站上，很少有简单的音频播放器是直播电台。

这是它的样子... audio player pic

这是我为这些音频播放器编写的代码：

<audio src="https://cbc_r2_tor.akacast.akamaistream.net/7/364/451661/v1/rc.akacast.akamaistream.net/cbc_r2_tor" controls style="width:75px;" volume="1.0"> </audio>

<audio src="http://204.2.199.166/7/288/80873/v1/rogers.akacast.akamaistream.net/tor925" controls="true" style="width:75px;" volume="1.0"></audio>

<audio src="http://indie.streamon.fm:8000/indie-48k.aac" controls="true" style="width:75px;" volume="1.0"></audio>

这些播放器不会在其他播放器播放时自动暂停。

我对这个主题做了一些研究，并在堆栈上找到了这个脚本...

<script>  
document.addEventListener('play', function(e){    
    var audios = document.getElementsByTagName('audio');    
    for(var i = 0, len = audios.length; i < len;i++){    
        if(audios[i] != e.target){    
            audios[i].pause();    
        }    
    }    
}, true);  
</script>

顺便说一句，我正在使用 wix.com 来构建所有这些，但我真的不确定将这个脚本放在哪里。我试图将它放在 Edit code 的下面，其中是单个音频播放器的代码，但似乎根本不起作用。

实现此目标的最简单方法是什么？

我是初学者，所以任何帮助将不胜感激。提前致谢:)

Answer 1

Wix 不公开 window 或 document 对象。

但是，您可以使用 $w()。

如 let myElement = $w("#myElement");

有关更多信息，请访问该站点：https://www.wix.com/code/reference/%24w.html

编辑

我建议不要在这里使用 'document' 作为变量名，它可能会与真正的文档对象混淆。

这是我在上面指出的 Wix 站点的一些指示，应该可以解决您正在尝试做的事情...

从页面获取元素（来自 Wix）：

let imageElements = $w("Image");

let firstImage = imageElements[0];

只需将 'Image' 替换为 'Audio';

使用 onReady 事件（来自 Wix）：

function onReady(initFunction: ReadyHandler): void
callback ReadyHandler(): Promise<void>

将您的初始化代码放在 onReady 事件中 - 否则 DOM 可能还没有准备好。

正在创建您的事件处理程序（来自 Wix）：

$w("#myElement").onEvent( (event, $w) => {
    let targetId = event.target.id;  // "myElement"
});

$w("#myElement").onEvent( (event, $w) => {
    let eventType = event.type; // "click"
});

所以，使用类似的东西：

$w.onReady(function() {
    let myAudios = $w("audio");

    myAudios.onEvent((event, $w) => {
        let eventType = event.type;
        if(eventType == "play") // or use 'click' if play is not exposed
        {
            let targetId = event.target.id;
            for(var i = 0; i < myAudios.length; i++) {
                if(myAudios[i].id != targetId) {
                    myAudios[i].pause();
                }
            }        
        }
    });
});

最后的注释。

您需要使用 代码面板 .

将您的 javascript 代码放在您正在使用的页面上

来自 Wix：

The Public section of the sidebar contains files that are publicly accessible from your site. You can create JavaScript files and text files for use in public, and you can organize these files in folders. Your page and site code, which are also publicly accessible, do not appear in the Public section.

To edit page and site code, use the code panel.

观看来自 Wix 的这个短视频（您可以跳到 30 秒）以查看代码面板的位置。 https://support.wix.com/en/article/working-in-the-code-panel

编辑 2

我终于放弃了，创建了一个 Wix 帐户来测试这个。

不幸的是，关于它们从放置在页面上的对象公开的 API，您只能在 javascript 中执行操作。

但是，有一种方法可以获得您的功能：

创建 HTML iframe.

单击添加，然后单击更多，然后拖动 HTML iframe到您的页面上。

Double-click 或 select 然后单击“编辑代码”，然后将以下所有内容添加到“”在此处添加您的代码（仅限 HTTPS）' 框。

<audio src="http://narwakk.free.fr/musiques/Bob/Bob Marley - Roots, Rock, Reggae.mp3" controls> </audio>
<audio src="https://jazz-wr06.ice.infomaniak.ch/jazz-wr06-64.aac" controls></audio>
<audio src="https://hpr.dogphilosophy.net/test/wav.wav" controls></audio>
<script>
    document.addEventListener('play', function (e) {
        var audios = document.getElementsByTagName('audio');
        for (var i = 0, len = audios.length; i < len; i++) {
            if (audios[i] != e.target) {
                audios[i].pause();
            }
        }
    }, true);
</script>

删除您之前为音频编写的所有代码，预览它，您应该完成（除了使用您自己的声音）。

我将保留之前的编辑，因为它通常有效 - 只是不适用于 audio 标签...

如何自动暂停其他音频播放器并仅播放在 Wix 网站上选择的音频播放器？

How to automatically pause other audio players and play only the one that's selected on a Wix website?

javascript

html

velo