Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get soundManager soundId from class using jQuery

I am using bar-ui js of soundmanager.

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

I have many players so what i need.

I want to select sound id from html class using jQuery...

I that possible ???

Like i am using content class in the above code so i can apply some custom changes that..

Update

See here are many players

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

And here is example of soundmanager2 code

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');
    }
});
like image 965
Mohammad Umer Avatar asked Apr 11 '18 12:04

Mohammad Umer


1 Answers

If you'd like to make your ID available through the DOM, I'd suggest setting a data attribute in the whileLoading function like so:

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)
}
});

Then afterward, you can retrieve that ID from the element with jQuery(_Element_Selector_You_Want_To_Bind_To_).data('sound-id')

(Since I generally avoid jQuery, compulsory vanilla solution is document.querySelector(selector).setAttribute('data-sound-id', this.id) document.querySelector(selector).getAttribute('data-sound-id') )

like image 199
jmcgriz Avatar answered Nov 07 '22 23:11

jmcgriz