0

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

这是它的外观... 音频播放器图片

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

<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 来构建所有这些，但我真的不确定将这个脚本放在哪里。我试图将其放在编辑代码中，其中单个音频播放器的代码在其中，但这似乎根本不起作用。

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

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

4

1 回答 1

2

Wix 不会暴露windowordocument对象。

但是，您可以使用$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 代码放在您正在使用的页面上。

来自维克斯：

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

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

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

编辑 2

我终于屈服了，并创建了一个 Wix 帐户来测试它。

不幸的是，您只能在 javascript 中对它们从放置在页面上的对象公开的 API 做些什么。

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

创建一个HTML iframe.

单击Add，然后单击More，然后将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标签......

于 2018-03-20T03:34:53.407 回答