maboa / circleplayer Goto Github PK

View Code? Open in Web Editor NEW

217.0 217.0 120.0 1.13 MB

A CSS3 HTML5 audio player with a circular seekable progress bar and complete fallback

Home Page: Latest version is here : http://happyworm.com/jPlayerLab/circleplayer/

JavaScript 100.00%

circleplayer's People

Contributors

Stargazers

Watchers

Forkers

sydlawrence grabovetskiy mechanism warlockvincent franquis vergult uksurd88 spencerx nhangen happyworm triptych gourneau dkris umaar smcguinness linmic wangel13 pinktrink courtsimas robkellas robotment gilangmahardhika alekso iksky liluxdev srinivasarao549 bengenuity n4cr pkane asherbond leokmob awesome adios jaredrlawson ubraz fengyiyi zinwinmaw sensorium jchck philhawthorne thisislorenz mischa78 dragonzx sinanusta natelassiter landsurveyorsunited web5design andrewpoli leonomad hasanujjaman valrenicio hudsong lanestp josephilipraja coquer kurli thinkus break123 kileyohl qianyugang shiget lizhijun jefellis ourcd solarpixels ziemekwolski a84456083 nomikhokher a1b2c31989 clrsdream parisyne luoyemyy bakery mattauckland qiaoyuandeng jacekbugajny martinaroberto brdfdr raytaylorlin zgr024 aaronpyon visense insitemobile bamwang andrescabsi14 zhudebin mshem nancy-gao mohanlan standardspace heyuanchao kaikaiandhisfellows kewlpluz zekaze usergit jandersolutions giant-rabbit giamai bmhoang dhruv3

circleplayer's Issues

how about an example implementation

This github project doesn't provide any implementation examples. Those would be most helpful.

Graphical modification

I am taking a look at the source psd and I need a smaller looking player for one project. I was wondering if any such modification is already available.

If not available I will try to make one and contribute.

shoutcast version 2.0 not working

Ok so my shoutcast stream URL is http://96.30.33.112:8080/stream/soda/128 however jPlayer wont allow it to play does anyone have a fix for it.

How to change audio file at runtime?

Issue with progress indicator stopping half way (even in Chrome/Firefox)

Hi there,

I'm having a strange issue whereby the progress indicator is stopping halfway round:

http://www.red24management.com/single-voice/

It was working absolutely fine but at some point it stopped working and I'm stumped as to what it could be.

The player is toward the bottom of that test page, I'd greatly appreciate any help on this.

Thanks,

Jack

does't work for firefox when playing mp3

var myCirclePlayer = new CirclePlayer("#jquery_jplayer", {
mp3 : "http://jplayer.org/audio/mp3/Miaow-07-Bubble.mp3"
}, {
cssSelectorAncestor : "#audioPlayer"
});
code like that.but it does't work for firefox 30.0 ubuntu

Circle Player Binds Scrolling

I've noticed on a site using the Circle Player that when the Circle Player is in play, users can no longer scroll the page up and down using the arrow keys. This is evident even on the Circle Player demo page. Is there a reason this is set up this way?

jPlayer Circle not working in IE 7/8/9

Hi All!

I'm unsure of the proper protocol for posting issues but I can not get this thing to work for the life of me and I'm at a loss. Plus I posted on the Google Groups site and now has responded at all. It works on everything except IE 7/8/9 and when I looked at the FAQs it just said that my swfPath is incorrect but all looks fine to me. I'm not to sure what I'm doing wrong and any help would be appreciated. It's been weeks and I still haven't figured it out.

The link is http://feefifofun.com/musicbutton.html but make sure to turn your volume down initially as there is an embedded song, luckily it doesn't loop.

What's listed in of my HTML:

MY HTML:

    <div id="jquery_jplayer_1" class="cp-jplayer"></div>

    <div class="prototype-wrapper">

        <div id="cp_container_1" class="cp-container">
            <div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% -->
                <div class="cp-buffer-1"></div>

            </div>
            <div class="cp-progress-holder">
                <div class="cp-progress-1"></div>

            </div>
            <div class="cp-circle-control"></div>
            <ul class="cp-controls">
                <li><a href="#" class="cp-play" tabindex="1">0play</a></li>
                <li><a href="#" class="cp-pause" style="display:none;" tabindex="1">pause</a></li>
            </ul>
        </div>
    </div>

Snippet of script from my circle.player.js:

var CirclePlayer = function(jPlayerSelector, media, options) {
var self = this,

    defaults = {
        // solution: "flash, html", // For testing Flash with CSS3
        supplied: "wav, mp3, oga",
        // Android 2.3 corrupts media element if preload:"none" is used.
        // preload: "none", // No point preloading metadata since no times are displayed. It helps keep the buffer state correct too.
        cssSelectorAncestor: "#cp_container_1",
        cssSelector: {
            play: ".cp-play",
            pause: ".cp-pause"
        }
    },

Unable to play audio using Flash in Chrome

I downloaded the code (v13) and modified the demo page to use the option

solution: "flash"

However, after reloading the page, Chrome (ver. 17.0.963.56) no longer played any audio after clicking the circle. The same page DID work in IE 9 using both the HTML and Flash solutions.

I have an audio has 1min length, how to just play 00:29 - 00:52?

Circle players from template

Hi,

if I want to use some templating system and create view which will generate CirclePlayer for me I can't as the following does not work:

var template = '<div><div id="jquery_jplayer_1" class="cp-jplayer"></div> <div id="cp_container_1" class="cp-container"> <div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% --> <div class="cp-buffer-1"></div> <div class="cp-buffer-2"></div> </div> <div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% --> <div class="cp-progress-1"></div> <div class="cp-progress-2"></div> </div> <div class="cp-circle-control"></div> <ul class="cp-controls"> <li><a class="cp-play" tabindex="1">play</a></li> <li><a class="cp-pause" style="display:none;" tabindex="1">pause</a></li> <!-- Needs the inline style here, or jQuery.show() uses display:inline instead of display:block --> </ul> </div></div>'

var $template = $(template);
var myCirclePlayer = new CirclePlayer($template.find("#jquery_jplayer_1"),
{
    m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
    oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
}, {
    cssSelectorAncestor: "#cp_container_1"
});

$('body').append($template);

But the crazy thing is that if I move $('body').append($template) before new Cicr... then it works. The reason I don't want this workaround is that my view is not be responsible for self insertion into body.

I can not have more then 10 (ten) circle players in one page

How is it possible if I add more then 10 cicrle player instances only 10 of them work?
http://radioejani.al/muzike.php

Only first 10 work . The songs that are new dont work

Thank you in advance

Seeking issue after resizing player with CSS Transform

The player was resized by using CSS "Transform" to fit designer's layout. However, the seeking control had some problem - when dragging the mouse along the circle to seek, the progress indicator does not follow accordingly. And it seemed to jump randomly.

Digging into the code in "circle.player.js", in line 215, I found that function "_getArcPercent()" used jQuery's width()/height() functions to retrieve control's size, and to decide target progress percentage.

x = pageX - offset.left - this.jq.circleControl.width()/2,
y = pageY - offset.top - this.jq.circleControl.height()/2,

Although CSS Tranform changed player compoment size visually, it did not change the intrinsic styles. So, no matter how smaller the progress indicator had become, above code still gave the same original circle control sizes.

Some people have suggested "getBoundingClientRect()" to get actual size. With that, the above code would be

x = pageX - offset.left - this.jq.circleControl[0].getBoundingClientRect().width/2,
y = pageY - offset.top - this.jq.circleControl[0].getBoundingClientRect().height/2,

I have tried and it seems working.

Is there a way to show the progress of a song when using a SHOUTcast stream?

I'm using the CirclePlayer with a SHOUTcast stream like this:

cp = new CirclePlayer('#jquery_jplayer_1', {},
{
  ready: function(event)
  {
    cp.player.jPlayer('setMedia', { mp3: 'http://stream-url:8004' });
  }, // Etc
}

This doesn't show the progress of the song. Is there a way to do that?

circleplayer and bootstrap

Trying to integrate jplayer into a bootstrap site. There seems to be a conflict I can't figure out. If I use the demo index file on my site, player works, but if I link the bootstrap css into the same file the player styles break. Anyone encounter this before? I didn't see it as a known issue.

Possible to use stop functionality with this player instead of pause?

When the audio is playing, is there an option or a way to currently have the player display a stop button (after it is styled of course) so that the audio completely stops and goes back to the beginning once it is clicked. And also to have it stop all other players instead of pausing them?

In jPlayer's documentation, it says that using jPlayer("play") instead of jPlayer("play",time) should start the audio from the beginning, which is exactly what I need. However, this is not working for me in CirclePlayer.

Flash Fallback doesn't work

Hi There,

I use the circle Player and my flash fallback does not work.
Can you please help me.

Here ist the site:
www.billylewis.de/hear_us.html

And here the code:

<title>Billy Lewis - Leipzig</title>

            <link rel="stylesheet" href="circle.skin/circle.player.css">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.transform2d.js"></script>
    <script type="text/javascript" src="js/jquery.grab.js"></script>
    <script type="text/javascript" src="js/jquery.jplayer.js"></script>
    <script type="text/javascript" src="js/mod.csstransforms.min.js"></script>
    <script type="text/javascript" src="js/circle.player.js"></script>
    <!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->

    <script type="text/javascript">
    $(document).ready(function(){

        /*
         * Instance CirclePlayer inside jQuery doc ready
         *
         * CirclePlayer(jPlayerSelector, media, options)
         *   jPlayerSelector: String - The css selector of the jPlayer div.
         *   media: Object - The media object used in jPlayer("setMedia",media).
         *   options: Object - The jPlayer options.
         *
         * Multiple instances must set the cssSelectorAncestor in the jPlayer options. Defaults to "#cp_container_1" in CirclePlayer.
         */

        var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
        {
            m4a: "../media/driving.mp3,media/driving.mp3",
            oga: "media/driving.ogg"
        }, {
            cssSelectorAncestor: "#cp_container_1",
            swfPath: "js",
            supplied: "m4a,ogg",
            wmode: "window"


        });

    });
    </script>

home

listen to our first piece called i'm driving

    <!-- The jPlayer div must not be hidden. Keep it at the root of the body element to avoid any such problems. -->
    <div id="jquery_jplayer_1" class="cp-jplayer"></div>

    <!-- This is the 2nd instance's jPlayer div -->
    <div id="jquery_jplayer_2" class="cp-jplayer"></div>

    <div class="prototype-wrapper"> <!-- A wrapper to emulate use in a webpage and center align -->


        <!-- The container for the interface can go where you want to display it. Show and hide it as you need. -->

        <div id="cp_container_1" class="cp-container">
            <div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% -->
                <div class="cp-buffer-1"></div>
                <div class="cp-buffer-2"></div>
            </div>
            <div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% -->
                <div class="cp-progress-1"></div>
                <div class="cp-progress-2"></div>
            </div>
            <div class="cp-circle-control"></div>
            <ul class="cp-controls">
                <li><a class="cp-play" tabindex="1">play</a></li>
                <li><a class="cp-pause" style="display:none;" tabindex="1">pause</a></li> <!-- Needs the inline style here, or jQuery.show() uses display:inline instead of display:block -->
            </ul>
        </div>
        </div><p class="hearus"> i'm Driving</p>
    </div>

I want to achieve local playing mp3?

bug with buffer bar on jplayer circle.

Copied from jPlayer Group Post

Sorry for my bad english.

I found bug in work buffer bar on jplayer circle.

in circle.player.js on line 120

  percent = 100 * bufferTime / self.audio.duration;

but, other case bufferTime > self.audio.duration and percent > 100!

  bufferTime=77.32250213623047
  self.audio.duration=77.3225

Then the last step function _progress not work, because else if (percent <= 100)
i fix this insert line below percent = 100 * bufferTime / self.audio.duration;
if(percent>100) percent=100;

test this bug: http://test.voice-cards.tk/audio/test.htm

sample mp3-files:
http://voice-cards.tk/get_track.php?id=100625

No valid bower.json

Hi, when I do a "composer -vvv install" on my project it appears this error:

[Composer\Repository\InvalidRepositoryException]
  No valid bower.json was found in any branch or tag of https://github.com/maboa/circleplayer.git, could not load a package from it.
Exception trace:
 () at C:\Users\Eth01\AppData\Roaming\Composer\vendor\fxp\composer-asset-plugin\Repository\AssetVcsRepository.php:44
 Fxp\Composer\AssetPlugin\Repository\AssetVcsRepository->initialize() at phar://C:/composer/composer.phar/src/Composer/Repository/ArrayRepository.php:195
 Composer\Repository\ArrayRepository->getPackages() at phar://C:/composer/composer.phar/src/Composer/DependencyResolver/Pool.php:113
 Composer\DependencyResolver\Pool->addRepository() at C:\Users\Eth01\AppData\Roaming\Composer\vendor\fxp\composer-asset-plugin\Repository\Util.php:71
 Fxp\Composer\AssetPlugin\Repository\Util::addRepositoryInstance() at C:\Users\Eth01\AppData\Roaming\Composer\vendor\fxp\composer-asset-plugin\Repository\Util.php:44
 Fxp\Composer\AssetPlugin\Repository\Util::addRepository() at C:\Users\Eth01\AppData\Roaming\Composer\vendor\fxp\composer-asset-plugin\Repository\AbstractAssetsRepository.php:141
 Fxp\Composer\AssetPlugin\Repository\AbstractAssetsRepository->whatProvides() at phar://C:/composer/composer.phar/src/Composer/DependencyResolver/Pool.php:213
 Composer\DependencyResolver\Pool->computeWhatProvides() at phar://C:/composer/composer.phar/src/Composer/DependencyResolver/Pool.php:202
 Composer\DependencyResolver\Pool->whatProvides() at phar://C:/composer/composer.phar/src/Composer/DependencyResolver/RuleSetGenerator.php:173
 Composer\DependencyResolver\RuleSetGenerator->whitelistFromPackage() at phar://C:/composer/composer.phar/src/Composer/DependencyResolver/RuleSetGenerator.php:153
 Composer\DependencyResolver\RuleSetGenerator->allowListFromPackage() at phar://C:/composer/composer.phar/src/Composer/DependencyResolver/RuleSetGenerator.php:322
 Composer\DependencyResolver\RuleSetGenerator->whitelistFromJobs() at phar://C:/composer/composer.phar/src/Composer/DependencyResolver/RuleSetGenerator.php:309
 Composer\DependencyResolver\RuleSetGenerator->allowListFromJobs() at phar://C:/composer/composer.phar/src/Composer/DependencyResolver/RuleSetGenerator.php:373
 Composer\DependencyResolver\RuleSetGenerator->getRulesFor() at phar://C:/composer/composer.phar/src/Composer/DependencyResolver/Solver.php:217
 Composer\DependencyResolver\Solver->solve() at phar://C:/composer/composer.phar/src/Composer/Installer.php:489
 Composer\Installer->doInstall() at phar://C:/composer/composer.phar/src/Composer/Installer.php:232
 Composer\Installer->run() at phar://C:/composer/composer.phar/src/Composer/Command/InstallCommand.php:122
 Composer\Command\InstallCommand->execute() at phar://C:/composer/composer.phar/vendor/symfony/console/Command/Command.php:245
 Symfony\Component\Console\Command\Command->run() at phar://C:/composer/composer.phar/vendor/symfony/console/Application.php:835
 Symfony\Component\Console\Application->doRunCommand() at phar://C:/composer/composer.phar/vendor/symfony/console/Application.php:185
 Symfony\Component\Console\Application->doRun() at phar://C:/composer/composer.phar/src/Composer/Console/Application.php:281
 Composer\Console\Application->doRun() at phar://C:/composer/composer.phar/vendor/symfony/console/Application.php:117
 Symfony\Component\Console\Application->run() at phar://C:/composer/composer.phar/src/Composer/Console/Application.php:113
 Composer\Console\Application->run() at phar://C:/composer/composer.phar/bin/composer:61
 require() at C:\composer\composer.phar:24

how can I fix it?