Jplayer播放音频仅在某些音频上导致Safari错误

时间:2019-03-08 12:02:51

标签: jquery magento2 jplayer magento-2.0

我的页面上有以下脚本,该脚本可实例化页面加载时的所有jplayer,并且单击“播放”按钮后,就会播放音频。 但是我遇到一个奇怪的问题,对于某些音频,播放按钮会启动,突然停止而没有播放任何内容。

此问题仅在Mac设备和其他IOS移动设备上出现

下面是我用来播放音频文件的代码

<script>
    require(["jquery"], function($) {

    $(document).ready(function(){
        /*---Create a jplayer instance on click on the play image---*/

        var mediaDetailJson = '<?php echo json_encode($mediaDetail); ?>';
        mediaDetailJson = $.parseJSON(mediaDetailJson);

        $(".jp-play").on('click', function(e) {

            e.preventDefault();

            var jPlayerId = $(this).closest('.jp-audio').prev().attr('id');
            var counter = jPlayerId.replace(/[^\d]+/, '');
            counter = parseInt(counter);

            $("#"+jPlayerId).jPlayer({
                ready: function (event) {
                    $(this).jPlayer("setMedia", {
                        title: mediaDetailJson[counter]['title'],
                        mp3: mediaDetailJson[counter]['path']
                    });
                },
                play: function() { // To avoid multiple jPlayers playing together.
                    $(this).jPlayer("pauseOthers");
                },
                swfPath: "https://www.voicebooking.com/js",

                nativeSupport: true,
                cssSelectorAncestor: "#jp_container_"+counter,
                wmode: "window",
                globalVolume: true,
                useStateClassSkin: true,
                autoBlur: false,
                smoothPlayBar: true,
                keyEnabled: true,
                remainingDuration: true,
                toggleDuration: true,
                volume: 1
            }).jPlayer("play");
        });
    });


    });


    function updateHeaderTitle(text){
        jQuery("#audio_heading_text").html(text);
        jQuery("#audio_product").val(text);

    }
</script>

我做了一些研究,有人说IOS不支持在document.ready中播放音频文件,因此需要一些与用户相关的事件。然后我尝试使用以下脚本,但仍然没有成功。

<script>
    require(["jquery"], function($) {

    $(document).ready(function(){
        /*---Create a jplayer instance on click on the play image---*/

        var mediaDetailJson = '<?php echo json_encode($mediaDetail); ?>';
        mediaDetailJson = $.parseJSON(mediaDetailJson);

        $(".jp-play").on('click', function(e) {

            e.preventDefault();

            var jPlayerId = $(this).closest('.jp-audio').prev().attr('id');
            var counter = jPlayerId.replace(/[^\d]+/, '');
            counter = parseInt(counter);

            $("#"+jPlayerId).jPlayer({
                ready: function (event) {
                    $(this).jPlayer("setMedia", {
                        title: mediaDetailJson[counter]['title'],
                        mp3: mediaDetailJson[counter]['path']
                    });
                },
                play: function() { // To avoid multiple jPlayers playing together.
                    $(this).jPlayer("pauseOthers");
                },
                swfPath: "https://www.voicebooking.com/js",

                nativeSupport: true,
                cssSelectorAncestor: "#jp_container_"+counter,
                wmode: "window",
                globalVolume: true,
                useStateClassSkin: true,
                autoBlur: false,
                smoothPlayBar: true,
                keyEnabled: true,
                remainingDuration: true,
                toggleDuration: true,
                volume: 1
            }).jPlayer("play");
        });
    });


    });


    function updateHeaderTitle(text){
        jQuery("#audio_heading_text").html(text);
        jQuery("#audio_product").val(text);

    }
</script>

有人知道我想念什么吗? 在Mac设备上,Safari浏览器,出现以下错误:

  

未处理的承诺拒绝:NotAllowedError(DOM异常35)

但仅针对有问题的音频。

请帮助!

0 个答案:

没有答案