太多的音频标签使我的网站加载速度非常慢.有没有解决方案

too many audio tags make my website load very slowly. is there a solution?

本文关键字：非常 速度 有没有 解决方案 加载 网站 音频 标签 我的 太多      更新时间：2023-09-26

我做了一个网站（还没有播出），我用一些免费托管对其进行了现场测试。该网站包含一个地图标签和一张大图片。我这样做是为了让如果有人点击图片的一部分，就会听到特定的音频，根据他点击的位置。

我的问题是有很多音频标签（大约 300 个），并且因为有很多占用带宽的文件，大约需要 10 分钟才能完全加载网站，这意味着大多数音频在几分钟内无法工作。

我

想知道是否有一种方法，也许是javascript或PHP的响应方式，它允许我仅在用户单击地图时才制作这些音频标签。这样它就不会使用那么多带宽。另外，如果有人能想到更好的方法，它将不胜感激。

我正在为点击事件添加 javascript，以便您可以看到它的全部内容 -

$('#Swensens_maze').click(function(){
        $('audio').each(function(){
        this.pause(); // Stop playing
         // Reset time
        });
        $('#Swensens_maze_audio').get(0).play();
        return false;
    });

这是众多例子中的一个例子。"#swensens_maze"是区域标签，"#Swensens_maze_audio"是它的音频标签。

发生您的问题是因为浏览器尝试为每个音频标签预加载音频。所以答案是将音频标签中的属性预加载设置为值 none

<audio preload="none">

编辑
音频现在会自动分层

编辑 2
我刚刚想起空src是一种不好的做法，我会找到一个解决方案，最好的方法是将信息存储在其他标签中，然后使用 js

创建一个音频标签编辑 3
JS小提琴版本2
更好的版本，不留空的src属性，所有的音频信息都存储在隐藏的input内，一旦点击该区域，点击div内通过JS提供的audio标签。

<html>
    <head>
        <script src="jq.js"></script>
        <style>
            .map {width:100%;height:75px;background:#bbb}
            .c1 {background:#f2f2f2}
            .c2 {background:#000}
            .c3 {background:#cc4444}
        </style>
    </head>
    <body>
        <div class='map c1'>
            <input type='hidden' data-original='1.mp3' data-format="audio/mpeg" />
        </div>
        <div class='map c2'>
            <input type='hidden' data-original='2.mp3' data-format="audio/mpeg" />
        </div>
        <div class='map c3'>
            <input type='hidden' data-original='3.mp3' data-format="audio/mpeg" />
        </div>
        <script>
            $('div.map').click(function () {
                $('audio').each(function () {
                    this.pause();
                });
                //Check if audio is already present, if true, then exit
                if($(this).find('audio').length > 0)
                    return;
                var childInput  = $(this).find('input:hidden'), //Find information
                    audioTag    = document.createElement("AUDIO"),// Create AUDIO element
                    audioSource = document.createElement("SOURCE"), //Create SOURCE element
                    audioType   = childInput.attr('data-format'),//retrieve audio type, then you could checkif the browser supports this format
                    audioSrc    = childInput.attr('data-original'); //retrieve audio src
                //Set type and src of the source
                audioSource.type= audioType;
                audioSource.src= audioSrc;
                //Enable controls and append SOURCE to AUDIO
                audioTag.controls = true;
                audioTag.appendChild(audioSource);
                this.appendChild(audioTag);// Append the created audio tag to the clicked div
                audioTag.load();//Load the src
                audioTag.play();//Play the audio
                return false;
            });
        </script>
    </body>
</html>



较早的答案
对空源不利 $（'div.map'）.click（function （） { $（'audio'）.each（function （） { this.pause（）; }); var audioTag = $（this）.find（'audio'）， sourceTag=audioTag.children（'source'）;

            if (sourceTag.attr('src')=='') {
                sourceTag.attr('src', sourceTag.attr('data-original'));
                audioTag.load()
            }
            audioTag.get(0).play();
            return false;
        });

整页小提琴演示（播放器不出现，因为没有任何音频文件）：

<html>
    <head>
        <script src="jq.js"></script>
        <style>
            .map {
                width:100%;
                height:75px;
                background:#bbb
            }
            .c1 {
                background:#f2f2f2
            }
            .c2 {
                background:#000
            }
            .c3 {
                background:#cc4444
            }
        </style>
    </head>
    <body>
        <div class='map c1'>
            <audio controls>
                <source data-original='1.mp3' src='' type="audio/mpeg" />
            </audio>
        </div>
        <div class='map c2'>
            <audio controls>
                <source data-original='2.mp3' src='' type="audio/mpeg" />
            </audio>
        </div>
        <div class='map c3'>
            <audio controls>
                <source data-original='3.mp3' src='' type="audio/mpeg" />
            </audio>
        </div>
        <script>
            $('div.map').click(function () {
                $('audio').each(function () {
                    this.pause();
                });
                var audioTag = $(this).find('audio'),
                    sourceTag=audioTag.children('source');
                if (sourceTag.attr('src')=='') {
                    sourceTag.attr('src', sourceTag.attr('data-original'));
                    audioTag.load()
                }
                audioTag.play();
                return false;
            });
        </script>
    </body>
</html>

<audio src="abc.mp3"controls class="audioDemo" preload="none"></audio> 
<audio src="abc1.mp3"controls class="audioDemo" preload="none"></audio> 
<audio src="abc2.mp3"controls class="audioDemo" preload="none"></audio> 
<audio src="abc3.mp3"controls class="audioDemo" preload="none"></audio> 
<audio src="abc4.mp3"controls class="audioDemo" preload="none"></audio>
是的

，不要将 src 属性留空，而是给 src 一个有效的空白和短文件.mp3。然后当用户单击或用好文件替换 src 时，如下所示：

document.getElementById（"audio8"）.src = "song.mp3";

此外，根据页面的制作方式，如果音频逐块出现，请查看懒惰大小.js以便在吼叫时顺利加载内容。易于使用且功能强大。https://github.com/aFarkas/lazysizes

您的浏览器会尝试为每个音频标签预加载音频。所以答案是将音频标签中的属性预加载设置为值 none使用可以使用：<audio controls preload="none">

相关文章：