by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 19:34
    JollyGoodWeb edited #447
  • 19:33
    JollyGoodWeb labeled #447
  • 19:33
    JollyGoodWeb assigned #447
  • 19:33
    JollyGoodWeb opened #447
  • Aug 07 19:01
    maurotbf commented #446
  • Aug 06 04:43
    danpastori commented #446
  • Aug 06 04:31
    maurotbf edited #446
  • Aug 06 04:08
    maurotbf edited #446
  • Aug 06 04:08
    maurotbf opened #446
  • Jul 30 13:41

    dependabot[bot] on npm_and_yarn

    (compare)

  • Jul 30 13:41

    jaydrogers on master

    Bump elliptic from 6.5.0 to 6.5… (compare)

  • Jul 30 13:41
    jaydrogers closed #445
  • Jul 30 09:57
    dependabot[bot] labeled #445
  • Jul 30 09:57
    dependabot[bot] opened #445
  • Jul 30 09:57

    dependabot[bot] on npm_and_yarn

    Bump elliptic from 6.5.0 to 6.5… (compare)

  • Jul 24 16:13
    jaydrogers commented #438
  • Jul 24 16:11
    jaydrogers labeled #438
  • Jul 24 16:11
    jaydrogers unlabeled #438
  • Jul 24 16:03
    xtranophilist commented #438
  • Jul 23 06:56
    ClemsB commented #442
Dan Pastori
@danpastori
As for #401, I know safari can be a real pain. I'll take a look into the issue, but have you tried setting preload to 'none': https://521dimensions.com/open-source/amplitudejs/docs/configuration/#configuring-amplitude-js
Liam Crean
@liamcrean
Thanks for the ideas Dan. I'll take a look.
Liam Crean
@liamcrean

I'm assuming I'd add it like this (still learning):

Amplitude.init({
"preload": "none",
// other functions //

Caleb King
@KingCaleb3_twitter
Hi team! I just found this project. Amazing work. I am a podcaster and was looking for examples for bringing in a RSS feed into the player. Any assistance is appreciated
Dan Pastori
@danpastori
@liamcrean Yup! That's how you would do the preload for none.
@KingCaleb3_twitter Thank you! I can definitely help. Since RSS and podcasts are primarily XML, you will first need a parser (probably easier serverside). Once parsed, you can transform the podcast and the elements to an array to format as JSON. With that array, you will have a URL where the audio is located and that will be the URL you can play with Amplitude. Super high level overview, but completely possible
Caleb King
@KingCaleb3_twitter
thank you for responding @danpastori sounds like i need to find a parser first
Liam Crean
@liamcrean
Thanks DAn. Tried that, no joy sadly. If you can find a fix for buffering in IOS and Mac Safari it'd be great. Happy to help fund it.
Dan Pastori
@danpastori
@KingCaleb3_twitter Definitely! So once you parse the feed you will get the URL of the audio and all of the meta data that you can pump through AmplitudeJS. If you are using PHP, Simple Pie is a wonderful RSS reader
@liamcrean Could it be an issue where the user has to initialize an action before the audio loads: https://stackoverflow.com/questions/9811429/html5-audio-tag-on-safari-has-a-delay. If you have any code that you could share, or more information, I can continue to try and resolve the issue
oscar4
@oscar4
Did a search but couldn't find anything - can AmplitudeJS interact with Bluetooth? I just want to do some simple control commands of an audio device using it - start/stop/pause - maybe more sophisticated if possible at a later stage?
Dan Pastori
@danpastori
@oscar4 It'd have to receive a trigger from Bluetooth some how. AmplitudeJS was designed to work in a web browser, however, you could listen to events and handle them within bluetooth
oscar4
@oscar4
Thanks Dan, I'm just beginning to look into this & found this doc from Google developers - just don't know how universal it is for browsers & would it work with this JS library? Essentially I'm only looking to invoke a bluetooth command when play/stop is actioned in - don't really need any feedback signals from BT - pretty simple (to start, anyway)
oscar4
@oscar4
Sorry, don't mean to make it appear overly simple - as I said just reading into it, atm
Dan Pastori
@danpastori
No problem! So you'd just have to hook into one of Amplitude's callbacks and send the Bluetooth message
I haven't messed around with Google's thing but it looks pretty cool!
Liam Crean
@liamcrean
Hello @danpastori — I can't share the code sadly - but I know that Safari will always fully buffer out tracks before playing. Which is a bit of a problem especially if the track is a long one. Can I help you fix it? Do some testing maybe? It seems like the fix where preload is set to none might work - but implementation appears to fail (or it doesn't work).
Dan Pastori
@danpastori
@liamcrean No problem! What I will do is test the canplaythrough hook you mentioned in #401 with iOS safari. In order to test, I'll work on a just a single MP3 to see how I can make this hook operate. I'll try to replicate and get a response ASAP for you guys!
Jonathan Larson
@jonnycincocinco
hi @danpastori this looks very cool - congrats! I'm simply trying to get a json of amplitude values from songs, specifically volume values paired with their time values. Just scanned the docs and didn't see a method for this but maybe I missed it?
Dan Pastori
@danpastori
Hi @jonnycincocinco Thanks! You should be able to add any value you want to the song object. When you retrieve the song object, you can do it through: https://521dimensions.com/open-source/amplitudejs/docs/functions/#get-song-at-index. Which would allow you to access the song object at a specific index. Amplitude.getSongAtIndex(). Is that what you are looking for?
Robert Wildling
@rowild

Hello altogether! I try, for the first time, to implement multiple players on one side and got it working so far. I was just wondering, if you could confirm me the following topics that still confuse me?

To my understanding, multiple audio players on one plage work because of the data-amplitude-playlist attributes and the provided playlists. That means I initialize Amplitude, init() only once and not per player instance, even though there are more players (in the HTML)?

I also read that play state (like shuffle etc) is hold on a playlist instance. But so far i could not find out, how to bind volume to only one specific player instance. Is that at all possible? I tried this way of HTML markup, but that does not work:

<!-- Audioplayer: Volume controls -->
      <div class="block ...">
        <div class="[ volume ] ...">
          <i data-amplitude-playlist="ac_playlist_16" data-amplitude-volume-down="true" class="material-icons amplitude-volume-down flex-none">volume_down</i>
          <label class=...">
            <input data-amplitude-playlist="ac_playlist_16" data-amplitude-volume-slider="true" type="range" class="amplitude-volume-slider" />
            <div class="fake-runnable-track ..."></div>
          </label>
          <i data-amplitude-playlist="ac_playlist_16" data-amplitude-volume-up="true" class="material-icons amplitude-volume-up flex-none">volume_up</i>
        </div>
        <div class="[ mute  ] ...">
          <i data-amplitude-playlist="ac_playlist_16" data-amplitude-mute="mute" class="material-icons amplitude-mute flex-none">volume_off</i>
        </div>
      </div>

What would I have to do to make audio work, as well? Thank you!

Dan Pastori
@danpastori
Hi @rowild are you making multiple playlist players or multiple single audio players? If you are using multiple playlists everything is scoped by the data-amplitude-playlist key. If you were to add multiple play/pause buttons you'd have to include the attribute data-amplitude-playlist="XXX" as well.
Robert Wildling
@rowild
@danpastori Sorry for the late response (I thought Gitter notifies me, but it doesn’t…) – I have more players on one site (that is HTML sections with playlists and player controls), but only Amplitude.init() with all the songs which are divided up into playlists. And I do use the data-amplitude-playlist attribute as can be seen in the example that I posted. The various player do work fine, just the volume controls to not. I have a feeling this is not implemeted… could that be the case? (None of the examples on the example page implements volume controls…)
mono1988
@mono151
I have the same problem
I just want to show up multiple single players in a caroussell, so that the user just can swipe it.
It would be comfortable to setup the songs like this:
"songs": [
{
"name": "Risin' High (feat Raashan Ahmad)",
"artist": "Ancient Astronauts",
"album": "We Are to Answer",
"url": "https://521dimensions.com/song/Ancient Astronauts - Risin' High (feat Raashan Ahmad).mp3",
"cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/we-are-to-answer.jpg"
},
{
"name": "Risin' High (feat Raashan Ahmad)",
"artist": "Ancient Astronauts",
"album": "We Are to Answer",
"url": "https://521dimensions.com/song/Ancient Astronauts - Risin' High (feat Raashan Ahmad).mp3",
"cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/we-are-to-answer.jpg"
}
and to get the html code repeated automatically for each song in the list.Any idea how to do this? I try to use the owlcaroussel for that.
Alexis
@AlexisLapeze
hi, AmplitudeJs worked with url stream ?
to play the music
and load the cover_art_url
Jon
@jon424

Hi, I'm trying to incorporate the AmplitudeJS player in a React app. Does anyone have any experience using this library with React? I'm having trouble importing the library as an external <script>. I would really like to use this example as a model: https://codepen.io/521dimensions/pen/BbXmJX ... and I've tried adding the scripts to my index.html file without any luck. Here is how I have broken up the code in the linked example within my components
index.js
```import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

App.js
```import React from 'react';
import AudioPlayer from './components/AudioPlayer';
import './app.css';

class App extends React.Component {


  render() {
    return (
      <div className="App">
        <AudioPlayer />
      </div>
    );
  }
}


export default App;

AudioPlayer.js

/* eslint-disable react/jsx-no-target-blank */
/* eslint-disable jsx-a11y/alt-text */
import React, { Fragment } from 'react';
require('../functions');



class AudioPlayer extends React.Component {

  render() {

    return (
      <Fragment>

        {/* Blue Playlist Container */}
        <div id="blue-playlist-container">

          {/* Amplitude Player */}
          <div id="amplitude-player">

            {/* Left Side Player */}
            <div id="amplitude-left">
              <img data-amplitude-song-info="cover_art_url" className="album-art" />
              <div className="amplitude-visualization" id="large-visualization">

              </div>
              <div id="player-left-bottom">
                <div id="time-container">
                  <span className="current-time">
                    <span className="amplitude-current-minutes" ></span>:<span className="amplitude-current-seconds"></span>
                  </span>
                  <div id="progress-container">
                    <div className="amplitude-wave-form">

                    </div>
                    <input type="range" className="amplitude-song-slider" />
                    <progress id="song-played-progress" className="amplitude-song-played-progress"></progress>
                    <progress id="song-buffered-progress" className="amplitude-buffered-progress" value="0"></progress>
                  </div>
                  <span className="duration">
                    <span className="amplitude-duration-minutes"></span>:<span className="amplitude-duration-seconds"></span>
                  </span>
                </div>

                <div id="control-container">
                  <div id="repeat-container">
                    <div className="amplitude-repeat" id="repeat"></div>
                    <div className="amplitude-shuffle amplitude-shuffle-off" id="shuffle"></div>
                  </div>

                  <div id="central-control-container">
                    <div id="central-controls">
                      <div className="amplitude-prev" id="previous"></div>
                      <div className="amplitude-play-pause" id="play-pause"></div>
                      <div className="amplitude-next" id="next"></div>
                    </div>
                  </div>

                  <div id="volume-container">
                    <div className="volume-controls">
                      <div className="amplitude-mute amplitude-not-muted"></div>
                      <input type="range" className="amplitude-volume-slider" />
                      <div className="ms-range-fix"></div>
                    </div>
                    <div className="amplitude-shuffle amplitude-shuffle-off" id="shuffle-right"></div>
                  </div>
                </div>

... and a .js file for the functions:
functions.js
```
import Amplitude from 'amplitudejs';

/
When the bandcamp link is pressed, stop all propagation so AmplitudeJS doesn't
play the song.
/
let bandcampLinks = document.getElementsByClassName('bandcamp-link');

for( var i = 0; i < bandcampLinks.length; i++ ){
bandcampLinks[i].addEventListener('click', function(e){
e.stopPropagation();
});
}

let songElements = document.getElementsByClassName('song');

for( let i = 0; i < songElements.length; i++ ){
/
Ensure that on mouseover, CSS styles don't get messed up for active songs.
/
songElements[i].addEventListener('mouseover', function(){
this.style.backgroundColor = '#00A0FF';

this.querySelectorAll('.song-meta-data .song-title')[0].style.color = '#FFFFFF';
this.querySelectorAll('.song-meta-data .song-artist')[0].style.color = '#FFFFFF';

if( !this.classList.contains('amplitude-active-song-container') ){
  this.querySelectorAll('.play-button-container')[0].style.display = 'block';
}

this.querySelectorAll('img.bandcamp-grey')[0].style.display = 'none';
this.querySelectorAll('img.bandcamp-white')[0].style.display = 'block';
this.querySelectorAll('.song-duration')[0].style.color = '#FFFFFF';

});

/
Ensure that on mouseout, CSS styles don't get messed up for active songs.
/
songElements[i].addEventListener('mouseout', function(){
this.style.backgroundColor = '#FFFFFF';
this.querySelectorAll('.song-meta-data .song-title')[0].style.color = '#272726';
this.querySelectorAll('.song-meta-data .song-artist')[0].style.color = '#607D8B';
this.querySelectorAll('.play-button-container')[0].style.display = 'none';
this.querySelectorAll('img.bandcamp-grey')[0].style.display = 'block';
this.querySelectorAll('img.bandcamp-white')[0].style.display = 'none';
this.querySelectorAll('.song-duration')[0].style.color = '#607D8B';
});

/
Show and hide the play button container on the song when the song is clicked.
/
songElements[i].addEventListener('click', function(){
this.querySelectorAll('.play-button-container')[0].style.display = 'none';
});
}

/
Initializes AmplitudeJS
/
Amplitude.init({
'songs': [
{
'name': 'Risin\' High (feat Raashan Ahmad)',
'artist': 'Ancient Astronauts',
'album': 'We Are to Answer',
'url': 'https://dl.dropbox.com/s/w4rrrag15y86c0q/2%20mix.wav',
'cover_art_url': 'https://521dimensions.com/img/open-source/amplitudejs/album-art/we-are-to-answer.jpg'
},
{
'name': 'The Gun',
'artist': 'Lorn',
'album': 'Ask The Dust',
'url': 'https://521dimensions.com/song/08 The Gun.mp3',
'cover_art_url': 'https://521dimensions.com/img/open-source/amplitudejs/album-art/ask-the-dust.jpg'
},
{
'name': 'Anvil',
'artist': 'Lorn',
'album': 'Anvil',
'url': 'https://521dimensions.com/song/LORN - ANVIL.mp3',
'cover_art_url': 'https://521dimensions.com/img/open-source/amplitudejs/album-art/anvil.jpg'
},
{
'name': 'I Came Running',
'artist': 'Ancient Astronauts',
'album': 'We Are to Answer',
'url': 'https://521dimensions.com/song/ICameRunning-AncientAstronauts.mp3',
'cover_art_url': 'https://521dimensions.com/img/open-source/amplitudejs/album-art/we-are-to-answer.jpg'
},
{
'name': 'First Snow',
'artist': 'Emancipator',
'album': 'Soon It Will Be Cold Enough',
'url': 'https://521dimensions.com/song/FirstSnow-Emancipator.mp3',
'cover_art_url': 'https://521dimensions.com/img/open-source/amplitudejs/album-art/soon-it-will-be-cold-enough.jpg'
},
{
'name': 'Terrain',
'artist': 'pg.lost',
'album': 'Key',
'url': 'https://521dimensions.com/song/Terrain-pglost.mp3',
'cover_art_url': 'https://521dimensions.com/img/open-source/amplitudejs/album-art/key.jpg'
},
{
'name': 'Vorel',
'artist': 'Russian Circles',
'album': 'Guidance',
'url': 'https://521dimensions.com/son

Any insight would be greatly appreciated. I wish I knew a way to use <script> tags in the index.html file so that I could attach external .js files to React apps, but I'm not finding much online as to how to go about doing this.
dperis
@dperis
Hello. I would like to remove the ability to pause from the player. How to do that?
Robert Wildling
@rowild
@dperis I assume all you have to do is remove the DOM element that displays the pause button from your HTML. Is that it, what you are looking for?
YUKI HIRAOKA
@houjiro

Hi! I'm appreciating to use this great app so much!
Now I have a question.
Can we add any functions which runs after a song ends in the playlist?
For example I want to add the function to handle DOM if the song which has a specific meta data e.g. 'background_color': 'black' like below.

'songs': [
{
'name': 'song A',
'artist': 'artist A,
'url': 'https://aaa',
'background_color': ''
},
{
'name': 'song B',
'artist': 'artist B,
'url': 'https://bbb',
'background_color': 'black'
},
'name': 'song C,
'artist': 'artist C,
'url': 'https://ccc',
'background_color': ''
},
]

I could't find any mentions about the hook to run after ending or starting a song in a playlist though I haven't check whole document.
Could you give me your advice? Thank you.

dperis
@dperis
@rowild Yes, thank you. I was able to remove the pause graphic itself, but the player still pauses if you hit play while it is playing.
Robert Wildling
@rowild
@houjiro check the callback section in the docu: https://521dimensions.com/open-source/amplitudejs/docs/configuration/callbacks.html
There you find at the bottom that amplitude also listens to the native HTML5 Audio elements. ended should be the one you are looking for.
Robert Wildling
@rowild
@dperis There are different play buttons: https://521dimensions.com/open-source/amplitudejs/docs/elements/interactive-elements.html#play-button
Without knowing I assume you implemented the amplitude-play-pause button? If that is indeed so, try using the amplitude-play button only. (haven’t tested it)
Baker Sentamu aka Bakersen
@bakersen
Does Amplitude JS work with React Native Apps?
Jay Rogers
@jaydrogers

Hey @/all , thanks for joining us on Gitter.

We're actually going to be moving our community support channel over to our Discourse Community with our tech blog called Server Side Up. Github Issues will be reserved for bugs and feature requests only.

https://community.serversideup.net/

Having everything on Discourse will give everyone a lot of advantages:

  • Question threads are easier to follow
  • Discourse can still act like a live chat (for how fast it is back and forth in updating the screen)
  • Discourse is able to be indexed by search engines (which will help other people who have the same question)
  • When someone finds an answer, you can mark the post that solved your problem

We are in the process of soft-launching the community, but we wanted to give all of you a chance at first access since you all have been doing a great job at helping each other out.

You will find the "AmplitudeJS" section under the "Get Help" category (https://community.serversideup.net/c/get-help/amplitudejs/12).

If you have any questions or feedback on the community, feel free to let us know. Looking forward to answering your questions over there!

Thanks 🙌

Devon Godfrey
@devonhg
Hi all! I'm trying to get playlists to work with angular. However in spite of calling the binding command and in debug I have all of my lists shown and created it just isn't working. Any thoughts?
Jay Rogers
@jaydrogers
Hey @devonhg, try opening your question on our community. You’ll have a better chance of getting support https://community.serversideup.net/c/get-help/amplitudejs/27
We decommissioned Gitter for support the other week
Devon Godfrey
@devonhg
Thanks!
An_kush
@ankush1401
hey, may I ask, how do you import from the npm package once you installed it?Like i did an "import Amplitude from 'amplitudejs'" and then use the initialize in my component but it doesn't work...
An_kush
@ankush1401
forget the above question I figured it out. Cheers.
Jay Rogers
@jaydrogers

Re-posting this so future members can see this

🛫 We've moved! This Gitter chat room is no longer active.

Ask your questions here 👉 https://community.serversideup.net/c/get-help/amplitudejs/27

We created a Discourse community so that we can help you easier. Join us there!