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

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

我是初学者，所以任何帮助都会受到赞赏。在此先感谢：）

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：


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

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

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

编辑2

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

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

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

创建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代码......

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

1 个答案: