Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2013
    Location
    Texas, USA
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Changing position in audio with jquery

    I have it showing the progress, but I cant for the life of me get it to change the position of the currenttime in audio when sliding the slider.....when you move the slider it just continues playing where it was, and the slider sticks where you stopped it, doing nothing. I've also tried using just 'audio' and the call for the dom with [0] for audioplayer.

    Jquery:
    PHP Code:
    // progress bar
        
    $('#audioplayer').on('timeupdate', function() {
            if (!
    musicsearch) {
                $(
    '#musicspot').slider('value'this.currentTime this.duration);
            }
        });
        
        
    // progress changed ------ fix it just resets and find why the freakin dots go out of the bar, makes no sense
        
    $('#musicspot').on('slidestart', function(eventui) { 
            
    musicsearch true;
        });
        $(
    '#musicspot').on('slidestop', function(eventui) {
            var 
    newstartspot ui.value;
            $(
    'audio').bind('canplay', function() {
                
    this.currentTime newstartspot;
                
    alert($('#audioplayer')[0].currentTime);
                $(
    '#audioplayer')[0].play();
                
    musicsearch false;
            });
        }); 
    HTML:
    PHP Code:
    <!-- the audio player itself -->
                    <
    audio id="audioplayer">
                        <
    source src="music/Interrupted By Fireworks.mp3" type="audio/mp3" />
                        <
    source src="music/Interrupted By Fireworks.ogg" type="audio/ogg" />
                    </
    audio>
                    
                    <!-- 
    play/pause button -->
                    <
    img id="playpause" src="images/phoenix_website_bottom_bar_music_play.png" alt="" />
                    
                    <!-- 
    music progress bar
                    
    <progress id="seekbar" value="0" max="1"></progress>-->
                    <
    div id="musicspot"></div>
                    
                    <!-- 
    volume button -->
                    <
    div id="volcontainer">
                        <
    img id="volicon" src="images/phoenix_website_bottom_bar_music_volume.png" alt="" />
                        <
    div id="volpop"><div id="volume"></div></div>
                    </
    div

  • #2
    New Coder
    Join Date
    Jan 2013
    Location
    Texas, USA
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Also this is the wrong place but to save an almost double post, the css for the html posted seems to NOT allow me to add margins or anything to separate the stuff whatsoever. You can see an example at plguild.com. I have like 10px margins in between those buttons and stuff. I'll post here and apologize for it being under js, just hoping 2 problems can be solved in 1 post.

    PHP Code:
    #playpause, #playpause img {
        
    bordernone;
        
    clearnone;
        
    cursorpointer;
        
    displayblock;
        
    floatleft;
        
    height100%;
        
    padding0px;
        
    margin0px;
    }
    #seekbar {
        
    clearnone;
        
    cursorpointer;
        
    displayblock;
        
    floatleft;
        
    marginauto 1px;
        
    padding0px;
        
    width400px;
    }
    div#musicspot {
        
    backgroundurl(../images/phoenix_website_bottom_bar_music_track.pngno-repeat top left;
            -
    webkit-background-sizecontain;
            -
    moz-background-sizecontain;
            -
    o-background-sizecontain;
            
    background-sizecontain;
        
    cursorpointer;
        
    displayblock;
        
    floatleft;
        
    height11px;
        
    marginauto 1px;
        
    padding0px;
        
    width596px;
    }
    div#volcontainer {
        
    background-colordarkgray;
        
    displayblock;
        
    floatleft;
        
    height100%;
        
    padding0px;
        
    positionrelative;
        
    z-index500;
    }
    div#volpop {
        
    background-colortransparent;
        
    cursorpointer;
        
    displaynone;
        
    floatleft;
        
    height17px;
        
    left: -12px;
        
    margin0px 0px 0px -1px;
        
    padding0px;
        
    positionabsolute;
        
    top: -18px;
        
    width70px;
    }
    div#volcontainer img#volicon {
        
    bordernone;
        
    clearnone;
        
    cursorpointer;
        
    displayblock;
        
    floatleft;
        
    height100%;
        
    padding0px;
        
    margin0px;
    }
    div#volume {
        
    backgroundurl(../images/phoenix_website_bottom_bar_music_volumetrack.pngno-repeat top left;
            -
    webkit-background-sizecontain;
            -
    moz-background-sizecontain;
            -
    o-background-sizecontain;
            
    background-sizecontain;
        
    height11px;
        
    marginauto 3px;
        
    padding0px;
        
    positionrelative;
        
    width47px;
    }
    .
    ui-slider .ui-slider-handle {
        
    backgroundurl(../images/phoenix_website_bottom_bar_music_progressor.pngno-repeat top left;
            -
    webkit-background-sizecover;
            -
    moz-background-sizecover;
            -
    o-background-sizecover;
            
    background-sizecover;
        
    height11px;
        
    margin-top3px;
        
    margin-left: -7px;
        
    width12px;


  • #3
    New Coder
    Join Date
    Jan 2013
    Location
    Texas, USA
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Bump. Any ideas anyone? I got the CSS, but still no real idea how to actually set the audio after sliding the bar.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •