使用 jQuery 从 class 获取 soundManager soundId

Question

我正在使用 bar-ui 声音管理器的 js。

<div id="sm2-99943" class="sm2-bar-ui content compact flat full-width playlist full-width-player ">
    <div class="bd sm2-main-controls">
        <div class="sm2-inline-element sm2-button-element">
            <div class="sm2-button-bd" style="background: transparent url(http://support.simplepodcaster.com/wp-content/uploads/2018/04/podcast_channel_artwork-150x150.png) repeat scroll 0% 0% / cover ;">
                <div id="spp-player-background"> </div>
                <a href="#play" class="sm2-inline-button play-pause">Play / pause</a>
                <div class="eq">
                    <span class="bar bar-1"></span>
                    <span class="bar bar-2"></span>
                    <span class="bar bar-3"></span>
                    <span class="bar bar-4"></span>
                </div>
            </div>
        </div>
        <div class="sm2-inline-element sm2-inline-status progressbar" style="padding-right:0px !important;">
            <div class="sm2-playlist">
                <div class="sm2-playlist-target" style="max-width: 100% !important;"></div>
            </div>
            <div class="sm2-progress">
                <div class="sm2-progress-bd">
                    <div class="sm2-progress-track">
                        <div class="sm2-progress-bar1" style="display:none;"></div>
                        <div class="sm2-progress-bar"></div>
                        <div class="sm2-progress-ball">
                            <div class="icon-overlay"></div>
                        </div>
                    </div>
                </div>
                <div class="sm2-row">
                    <div class="sm2-inline-time1" style="display:none;">0:00</div>
                    <div class="sm2-inline-time">0:00</div>
                    <div class="sm2-inline-duration">0:00</div>
                </div>
            </div>
        </div>
        <div class="sm2-inline-element sm2-button-element sm2-menu">
            <div class="sm2-button-bd">
                <a href="#menu" class="sm2-inline-button menu">menu</a>
            </div>
        </div>
    </div>
    <div class="bd sm2-playlist-drawer sm2-element">
        <div class="sm2-playlist-wrapper">
            <ul class="sm2-playlist-bd">
                <li><a href="https://traffic.libsyn.com/secure/hmourra/HaniPodcast1_-_Introduction.mp3?dest-id=201638">Episode 1 - Introduction</a></li>
                <li><a href="https://traffic.libsyn.com/secure/hmourra/HaniPodcast2_-_Tools_To_Grow.mp3?dest-id=201638">Episode 2 - How To Start Podcasting</a></li>
                <li><a href="https://traffic.libsyn.com/secure/hmourra/SRP-thankyou.mp3?dest-id=201638">Episode 5 - Thank you!</a></li>
                <li><a href="https://traffic.libsyn.com/secure/hmourra/input.mp3?dest-id=201638">Episode 6</a></li>
                <li><a href="https://traffic.libsyn.com/secure/hmourra/episode6.mp3?dest-id=201638">2nd Episode 7</a></li>
                <li><a href="https://traffic.libsyn.com/secure/hmourra/Episode8.mp3?dest-id=201638">  Episode 10 - Blogging vs Podcasting</a></li>
                <li><a href="https://traffic.libsyn.com/secure/hmourra/Episode9.mp3?dest-id=201638">Episode 11 - Video vs Audio</a></li>
                <li><a href="https://traffic.libsyn.com/secure/hmourra/output.mp3?dest-id=201638">Episode 12 - Social Sharing Your Content</a></li>
                <li><a href="https://traffic.libsyn.com/secure/hmourra/hani2.mp3?dest-id=201638">Episode 13 - Growing Your Audience</a></li>
                <li><a href="https://traffic.libsyn.com/secure/hmourra/ep15.mp3?dest-id=201638">Episode 15 - Blogging for Leads</a></li>
                <li><a href="https://traffic.libsyn.com/secure/hmourra/ep16.mp3?dest-id=201638">Episode 16 - How To Get More iTunes Reviews</a></li>
                <li><a href="https://traffic.libsyn.com/secure/hmourra/ep17.mp3?dest-id=201638">Episode 17 - "Growing Your Email List on Autopilot"</a></li>
                <li><a href="https://traffic.libsyn.com/secure/hmourra/ep18.mp3?dest-id=201638">JUP 014 | Alexander Dahms: Mehrwert für andere statt Gewinndenken</a></li>
                <li><a href="https://traffic.libsyn.com/secure/hmourra/Iron_Horse.mp3?dest-id=201638">Episode 18</a></li>
                <li><a href="https://traffic.libsyn.com/secure/hmourra/Smoking_Gun.mp3?dest-id=201638">Episode 19 - New & Noteworthy</a></li>
                <li><a href="https://traffic.libsyn.com/secure/hmourra/Iron_Horse_copy.mp3?dest-id=201638">Episode 21 - Beliefs -> Decisions -> Outcomes</a></li>
                <li><a href="https://traffic.libsyn.com/secure/hmourra/WisdomTrek-Podcast-Day-597mixdown.mp3?dest-id=201638">Episode 22 - Publishing to Facebook</a></li>
                <li><a href="https://traffic.libsyn.com/secure/hmourra/ep22.mp3?dest-id=201638">Episode 24 - Repurposing Your Content</a></li>
                <li><a href="https://traffic.libsyn.com/secure/hmourra/test.mp3?dest-id=201638">Episode 26 - \Backslash /Frontslash To Facebook</a></li>
                <li><a href="https://traffic.libsyn.com/secure/hmourra/combined_This-is-the-title-with-an-emoji1523041021218.mp3?dest-id=201638">This is the title with an emoji</a></li>
            </ul>
        </div>
    </div>
</div>

我有很多玩家所以我需要什么。

我想 select 从 html class 使用 jQuery...

声音 ID

那可能吗???

就像我在上面的代码中使用内容 class 这样我就可以应用一些自定义更改..

更新

看到这里有很多玩家

http://www.schillmania.com/projects/soundmanager2/demo/bar-ui/

这里是 soundmanager2 代码示例

var mySoundObject = soundManager.createSound({
    // optional id, for getSoundById() look-ups etc. If omitted, an id will be generated.
    id: 'mySound',
    url: '/audio/mysoundfile.mp3',
    // optional sound parameters here, see Sound Properties for full list
    volume: 50,
    autoPlay: true,
    whileloading: function() {
        console.log(this.id + ' is loading');
    }
});

Answer 1

有一个特殊的属性 dom存储一个玩家的所有DOM对象，例如你可以根据代码通过表达式window.sm2BarPlayers[0].dom得到您在示例中演示的 bar-ui 库（它反过来利用了 soundmanager 库）。

据我了解，您正在寻找 SMSound（您通过 window.soundManager.getSoundById('sound0') 获得）和我提到的玩家对象之间的联系。这个连接是存在的，并且保存在玩家的私有变量中（就 JS 而言，它是一个闭包）：

exports = {
      on: null,
      actions: actions,
      dom: dom,
      playlistController: playlistController
    };
    soundObject = makeSound(playlistController.getURL());

稍后返回 exports 变量，这就是您触手可及的内容，而 soundObject 则在内部关闭。虽然似乎有一个技巧可以完成您的任务，如代码所示：您的声音和它的播放器都具有相同的 url，这就是您找到连接的方式。换句话说，这是方法：

var url = window.soundManager.getSoundById('sound0').url; //get the url of a sound
var player = window.sm2BarPlayers.find(function(p) { return p.playlistController.getURL() == url });
// Here you can use p.dom property where its DOM elements are kept and pass them to jQuery to build other search queries you need

总而言之，有了播放器 DOM 对象，您稍后可以通过标准 JS 选择器或 jQuery 选择器确定它是在内容区域还是其他地方。如果您需要详细说明如何处理最后一个任务，请在评论中告诉我。

Answer 2

如果您想通过 DOM 提供您的 ID，我建议您在 whileLoading 函数中设置数据属性，如下所示：

var mySoundObject = soundManager.createSound({
id: 'mySound',
url: '/audio/mysoundfile.mp3',
// optional sound parameters here, see Sound Properties for full list
volume: 50,
autoPlay: true,
whileloading: function() {
    jQuery(_Element_Selector_You_Want_To_Bind_To_).data('sound-id', this.id)
}
});

然后，您可以使用 jQuery(_Element_Selector_You_Want_To_Bind_To_).data('sound-id')

从元素中检索该 ID

（因为我通常避免 jQuery，强制性香草解决方案是 document.querySelector(selector).setAttribute('data-sound-id', this.id) document.querySelector(selector).getAttribute('data-sound-id') )

使用 jQuery 从 class 获取 soundManager soundId

Get soundManager soundId from class using jQuery

javascript

jquery

soundmanager2