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

时间:2014-12-29 11:00:49

标签: javascript jquery html5

我创建了一个网站(尚未播出),我通过一些免费托管测试了它。 该网站包含地图标记和其中的大图。 我是这么做的,如果有人点击图片的一部分,根据他点击的位置会听到特定的音频。

我的问题是有很多音频标签(大约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"是区域标签和#34;#Swensens_maze_audio"是它的音频标签。

5 个答案:

答案 0 :(得分:1)

编辑
音频现在自动进行战斗 编辑2
我刚刚记得空src是一种不好的做法,我会找到一个解决方案,最好的方法是将信息存储在其他标签中,然后使用js创建音频标签 编辑3
JS FIDDLE VERSION 2
更好的版本,不会留下空src属性,所有音频信息都存储在隐藏的input内,一旦你点击区域audio标签是通过JS内部提供的点击了div

<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>



OLDER ANSWER
空src不好     $('div.map')。click(function(){                 $('audio')。each(function(){                     this.pause();                 });                 var audioTag = $(this).find('audio'),                     sourceTag = audioTag.children( '源');

            if (sourceTag.attr('src')=='') {
                sourceTag.attr('src', sourceTag.attr('data-original'));
                audioTag.load()
            }

            audioTag.get(0).play();
            return false;
        });

整页FIDDLE DEMO(播放器未显示,因为没有任何音频文件):

<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>

答案 1 :(得分:0)

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

document.getElementById(&#34; audio8&#34;)。src =&#34; song.mp3&#34 ;;

此外,根据页面的制作方式,如果音频块在块后出现,请查看lazysize.js,以便在流氓时顺畅地加载您的内容。易于使用且功能强大。 https://github.com/aFarkas/lazysizes

答案 2 :(得分:0)

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

<audio preload="none">

答案 3 :(得分:0)

<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> 

答案 4 :(得分:-1)

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