Javascript打破音频播放器 [英] Javascript breaking audio players

问题描述

我知道此问题在tumblr 中，代码被剥离，音频播放器坏了.

I know about this issue in tumblr, the code gets stripped out and the audio players are broken.

我现在正在使用flexslider.js，但问题几乎相同.我用这个解决了

I'm using flexslider.js now but the problem is pretty much the same. I fixed it with this

    setTimeout(function() {                        
                $('.audio').each(function(){
                    var audioID = $(this).parent().attr("id");
                    var $audioPost = $(this);
                    $.ajax({
                        url: '/api/read/json?id=' + audioID,
                        dataType: 'jsonp',
                        timeout: 50000,
                        success: function(data){
                            if ($audioPost.html().indexOf("is required to") != -1) {
                            $audioPost.append('<div style=\"background-color:black;">' + data.posts[0]['audio-player'] +'</div>');
                                }
                            }
                    });
                });
            }, 2000);

您需要调整浏览器窗口的大小以查看此内容，因为无论如何我都是从移动版本开始编码的……在永久链接页面上看起来还可以 http://tmbeta.tumblr.com/

You need to resize your browser window to see this because I started coding from the mobile version, anyway...it looks ok on permalink pages http://tmbeta.tumblr.com/post/21264072020 but it doesn't when the photosets (which use flexslider) and the player are on the same page http://tmbeta.tumblr.com/

看看如何将播放器添加到帖子底部?我希望它出现在显示[需要Flash 9才能收听音频.]的位置.我知道这基本上是.append所做的，但是我对jquery不够熟悉，因此我真的很难找到解决方案.

See how the player is added to the bottom of the post? I want it to appear where it says [Flash 9 is required to listen to audio.] instead. I know it's basically what .append does but I'm not familiar enough with jquery so I'm really struggling to find a solution.

推荐答案

看看HTML，结果并不令人惊讶:您正在将append()定义为元素为audio的元素，即<article>. jQuery将新的div追加到该范围的末尾–这是本文的底部.您需要通过以下方式更改元素插入的范围:

Looking at your HTML, the result is not surprising: you are scoping the append() to the element with the class audio, and that is the <article>. jQuery appends your new div to the end of that scope – which is the bottom of the article. You need to change the scope of your element insertion, either by

1. 迭代类audio-player的元素，而不是audio，即

$('.audio-player').each(function(){ … }

由于这会更改this的范围，因此您还必须调整检索帖子ID的行以查找元素层次结构，即

As this changes the scope of this, you will also have to adjust the line retrieving the post ID to look up the element hierarchy, i.e.

var audioID = $(this).parents('.audio').attr('id');

或通过

将元素插入范围设置为正确的播放器元素，即

Scoping your element insertion to the player element proper, i.e.

$audioPost.find('.audio-player').append('<div style=\"background-color:black;">' + data.posts[0]['audio-player'] +'</div>');

如果您想替换该元素内的span而不是附加到该元素上，以便您的播放器替换Flash警告，请

If you’d rather replace the span inside that element instead of appending to it, so your player replaces the Flash warning, do

$audioPost.find('#audio_player_'+audioID).replaceWith('<div style=\"background-color:black;">' + data.posts[0]['audio-player'] +'</div>');

相反.

在通过聊天进行了一些反复试验的现场测试后，对答案进行了编辑；请忽略评论主题.

这篇关于Javascript打破音频播放器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！