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

因此，在我的网站上，很少有简单的音频播放器是实时流广播电台。

这是它的样子...
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来构建所有这些，而且我真的不确定该脚本的确切位置。我试图将其放在“编辑”代码的下面，其中每个音频播放器的代码都在此位置，但这似乎根本不起作用。

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

我是一个初学者，因此将不胜感激。提前致谢：）

最佳答案

Wix不会公开window或document对象。

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

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

有关更多信息，请参见网站：https://www.wix.com/code/reference/%24w.html

编辑

我建议不要在此处使用“文档”作为变量名，因为它可能与真实文档对象混淆。

这是我上面指出的Wix站点的一些指针，这些指针应该理清您要尝试执行的操作...

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

let imageElements = $w("Image");

let firstImage = imageElements[0];

只需将“图像”替换为“音频”即可；

使用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：

  边栏的“公共”部分包含公开的文件
  可从您的网站访问。您可以创建JavaScript文件和文本
  文件以供公共使用，您可以将这些文件组织在文件夹中。
  您的页面和站点代码（也可以公开访问）不会
  出现在“公开”部分。

  要编辑页面和站点代码，请使用代码面板。

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

编辑2

我终于屈服了，并创建了一个Wix帐户来对此进行测试。

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

但是，有一种获取功能的方法：

创建一个HTML iframe。

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

双击它，或选择它并单击“编辑代码”，然后将以下所有内容添加到“在此处添加代码（仅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标记...

关于javascript - 如何自动暂停其他音频播放器并仅播放Wix网站上选择的播放器？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49372345/