<audio> </audio>标记在Safari中显示错误，并且不允许在Google-Chrome中跳过

问题描述

我正在使用基于Django的Web应用程序，该应用程序使用HTML5中的标签播放数据库中的音乐。这在Firefox上已经成功运行，但是在Google Chrome上播放时不允许跳过歌曲，并且在Safari上都不允许播放。每当我尝试时，都会从音频部分收到以下错误。是否有人会理解为什么会发生这种情况，或者对此有解决方案或替代方案？

Image from website loaded on safari

<div id="beat{{forloop.counter}}">
        <img class="image" src="{{beat.artwork.url}}" style="width:100%;" alt="Card image"/>
        <div class="middle" style="height:100%; top:50%">
            <p class="text-white font-weight-bold" style="margin-bottom:0%;">{{beat}}</p>
            <p class="text-white" style="margin-bottom:0%;">The Island Prince</p>
            <div style="margin-top:0%; margin-bottom:0%; margin-left:5%; width:90%;">
                <audio controls src="{{beat.beatFile.url}}" type="audio/mpeg" style="width:100%;"></audio>  
            </div>
            <p class="text-white" style="text-align:left; margin-bottom:0%;">
                Tags: 
                {% for tag in beat.tag.all %}
                {{tag}}
                {% endfor %}         
            </p>
            <p class="text-white font-weight-bold" style="text-align:center;margin-bottom:0%;">Purchase Today</p>
            <button type="button" data-product="{{beat.id}}" data-action="add" style="padding-bottom: 10px;" class="btn-lg btn-dark btn-block update-cart">Add To Cart</button>                     
        </div>
    </div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）