'color' parameter doesnt work when i use react-player on my website

[tashoilia]

Hello. I am using react-player library and i am trying to change audio player color to custom color but it doesnt work. On the widget API documentation 'https://developers.soundcloud.com/docs/api/html5-widget#params' , I use 'color' parameter for that but I don't know why it doesn't work. I am leaving the config object (which is found in the documentation of the react-player library on https://www.npmjs.com/package/react-player#standalone-player ) that I use on my app like below:

config={{ soundcloud: { options: { color: '#000000' } } }}

[fabianbernhart]

Hey @tashoilia,

it would be helpful if you share your iframe or API Endpoint.

[tashoilia]

Sure. I am using the https://www.npmjs.com/package/react-player component for displaying SoundCloud iframe on react app. It works with youtube and others but it wont work with SoundCloud. Code using it:

<ReactPlayer url={url} config={{ soundcloud: { options: { color: #000 } } }}/>

On Fri, 3 May 2024 at 23:17, Fabian Bernhart @.***> wrote:

Hey @tashoilia https://github.com/tashoilia,

it would be helpful if you share your iframe or API Endpoint.

— Reply to this email directly, view it on GitHub https://github.com/soundcloud/api/issues/291#issuecomment-2093775981, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALOE4A5ME7YXORXIZ5YSHOTZAP5IBAVCNFSM6AAAAABHFJ4VR6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAOJTG43TKOJYGE . You are receiving this because you were mentioned.Message ID: @.***>

[fabianbernhart]

Hey @tashoilia,

if there is a way to add query params to the react player as a field go ahead and add the color there like this

color=${encodeURIComponent(color)}

My Solution:

import React, { useRef, useEffect } from 'react';
import ReactPlayer from 'react-player';

const SoundCloudPlayer = () => {

  const playerRef = useRef(null);
  const color = "#fff"
  const url = "https://soundcloud.com/hetpompstationofficial/het-pompstation-pinotello-yung-petsi-en-kaper-hits-costa-de-keta-extended?si=b50343d605cf458f884fc5e690d19164&utm_source=clipboard&utm_medium=text&utm_campaign=social_sharing"
// This is the magic
  const iframeSrc = `${url}&color=${encodeURIComponent(color)}`;

  useEffect(() => {
    if (playerRef.current) {
      // Accessing the player's underlying iframe
      const iframe = playerRef.current.getInternalPlayer();
      if (iframe) {
        // Example: Adding additional parameters to the SoundCloud iframe URL
        const src = iframe.src + '&param1=value1&param2=value2';
        iframe.src = src;
      }
    }
  }, [playerRef]);

  return (
    <div>
      <ReactPlayer
        ref={playerRef}
        url={iframeSrc}
        width="100%"
        height={300}
        playing={false} // Set to true if you want autoplay
        controls={true}
      />
    </div>
  );
};

export default SoundCloudPlayer;

[tashoilia]

Thanks a lot. It worked very well.

On Sat, 4 May 2024 at 12:33, Fabian Bernhart @.***> wrote:

Hey @tashoilia https://github.com/tashoilia,

if there is a way to add query params to the react player as a field go ahead and add the color there like this

color=${encodeURIComponent(color)}

My Solution:

import React, { useRef, useEffect } from 'react';import ReactPlayer from 'react-player'; const SoundCloudPlayer = () => {

const playerRef = useRef(null); const color = "#fff" const url = "https://soundcloud.com/hetpompstationofficial/het-pompstation-pinotello-yung-petsi-en-kaper-hits-costa-de-keta-extended?si=b50343d605cf458f884fc5e690d19164&utm_source=clipboard&utm_medium=text&utm_campaign=social_sharing" const iframeSrc = ${url}&color=${encodeURIComponent(color)};

useEffect(() => { if (playerRef.current) { // Accessing the player's underlying iframe const iframe = playerRef.current.getInternalPlayer(); if (iframe) { // Example: Adding additional parameters to the SoundCloud iframe URL const src = iframe.src + '&param1=value1&param2=value2'; iframe.src = src; } } }, [playerRef]);

return (

);}; export default SoundCloudPlayer;

— Reply to this email directly, view it on GitHub https://github.com/soundcloud/api/issues/291#issuecomment-2094112506, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALOE4A3OQX5OOGWLKVKPKI3ZAS2PNAVCNFSM6AAAAABHFJ4VR6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAOJUGEYTENJQGY . You are receiving this because you were mentioned.Message ID: @.***>