search

jerosoler / waveform-path

🎙 Generator waveform paths for SVG 🎶
https://jerosoler.github.io/waveform-path/
MIT License
83 stars 6 forks source link

Default svg style #8

Closed hugolpz closed 5 months ago

hugolpz commented 6 months ago

Hello @jerosoler ,

A feature suggestion. I would like to replicate your elegant rainbow color in a programmatic way but it proves difficult to add it after generation.

It could be interesting to have a way to define the default style for all waves to come.

var options = { 
defs : `
              <defs>
                  <linearGradient id="lgrad" x1="0%" y1="50%" x2="100%" y2="50%" >
                      <stop offset="0%" style="stop-color:rgb(0,255,10);stop-opacity:1.00" />
                      <stop offset="25%" style="stop-color:rgb(0,188,212);stop-opacity:0.70" />
                      <stop offset="50%" style="stop-color:rgb(238,130,238);stop-opacity:1.00" />
                      <stop offset="75%" style="stop-color:rgb(103,58,183);stop-opacity:0.70" />
                      <stop offset="100%" style="stop-color:rgb(233,30,99);stop-opacity:1.00" />
                  </linearGradient>
              </defs>`,
id:"lgrad"
};

I battled for a while but I couldn't make it work out : before vs after

jerosoler commented 6 months ago

For css I just tried two methods. They work with the library, the problem is with the web component.

We can edit the color of the path through CSS. For example:

wave-audio-path-player::part(path2) {
    stroke-width: 3px;
// Method 1
    stroke: url(/test.svg#lgrad); 
// Method 2
    stroke: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><linearGradient id="lgrad" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="0%" style="stop-color:rgb(0,255,10);stop-opacity:1.00"></stop><stop offset="25%" style="stop-color:rgb(0,188,212);stop-opacity:0.70"></stop><stop offset="50%" style="stop-color:rgb(238,130,238);stop-opacity:1.00"></stop><stop offset="75%" style="stop-color:rgb(103,58,183);stop-opacity:0.70"></stop><stop offset="100%" style="stop-color:rgb(233,30,99);stop-opacity:1.00"></stop></linearGradient></svg>#lgrad');
}

test.svg file

<svg id="example1" height="140px" width="800px" xmlns='http://www.w3.org/2000/svg' >
    <defs>
    <linearGradient id="lgrad" x1="0%" y1="50%" x2="100%" y2="50%">
        <stop offset="0%" style="stop-color:rgb(0,255,10);stop-opacity:1.00"></stop>
        <stop offset="25%" style="stop-color:rgb(0,188,212);stop-opacity:0.70"></stop>
        <stop offset="50%" style="stop-color:rgb(238,130,238);stop-opacity:1.00"></stop>
        <stop offset="75%" style="stop-color:rgb(103,58,183);stop-opacity:0.70"></stop>
        <stop offset="100%" style="stop-color:rgb(233,30,99);stop-opacity:1.00"></stop>
    </linearGradient>
    </defs>
</svg>

These two methods work in "Firefox" in Chrome, they are not shown to me.

jerosoler commented 6 months ago

Another works in firefox with not in chrome :( 

<wave-audio-path-player src="https://hugolpz.github.io/NamesOfTheLand/img/MUS1963_36_128_mp3.mp3" wave-width="400" wave-height="40" color="#55007f" wave-color="#55007f" wave-progress-color="url('data:image/svg+xml;charset=utf-8,<svg xmlns=\'http://www.w3.org/2000/svg\'><linearGradient id=\'lgrad\' x1=\'0%\' y1=\'50%\' x2=\'100%\' y2=\'50%\'><stop offset=\'0%\' style=\'stop-color:rgb(0,255,10);stop-opacity:1.00\'></stop><stop offset=\'25%\' style=\'stop-color:rgb(0,188,212);stop-opacity:0.70\'></stop><stop offset=\'50%\' style=\'stop-color:rgb(238,130,238);stop-opacity:1.00\'></stop><stop offset=\'75%\' style=\'stop-color:rgb(103,58,183);stop-opacity:0.70\'></stop><stop offset=\'100%\' style=\'stop-color:rgb(233,30,99);stop-opacity:1.00\'></stop></linearGradient></svg>#lgrad')" wave-slider="#ffaaff" wave-options='{"samples": 100, "type": "steps", "top": 0, "animation": true }'></wave-audio-path-player>

And with custom propertiers work in firefox 

<wave-audio-path-player src="https://hugolpz.github.io/NamesOfTheLand/img/MUS1963_36_128_mp3.mp3" wave-width="400" wave-height="40" color="#55007f" wave-color="var(--color2)" wave-progress-color="var(--color3)" wave-slider="#ffaaff" wave-options='{"samples": 100, "type": "steps", "top": 0, "animation": false }'></wave-audio-path-player>
jerosoler commented 6 months ago

Work in chrome, following your methods.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Audio List</title>
</head>
<body>
<svg id="example1" height="140px" width="800px" xmlns='http://www.w3.org/2000/svg' style="display: none;">
    <defs>
    <linearGradient id="lgrad" x1="0%" y1="50%" x2="100%" y2="50%">
        <stop offset="0%" style="stop-color:rgb(0,255,10);stop-opacity:1.00"></stop>
        <stop offset="25%" style="stop-color:rgb(0,188,212);stop-opacity:0.70"></stop>
        <stop offset="50%" style="stop-color:rgb(238,130,238);stop-opacity:1.00"></stop>
        <stop offset="75%" style="stop-color:rgb(103,58,183);stop-opacity:0.70"></stop>
        <stop offset="100%" style="stop-color:rgb(233,30,99);stop-opacity:1.00"></stop>
    </linearGradient>
    </defs>
</svg>

<wave-audio-path-player src="https://hugolpz.github.io/NamesOfTheLand/img/MUS1963_36_128_mp3.mp3" wave-width="400" wave-height="40" color="#55007f" wave-color="url(#lgrad)" wave-progress-color="url(#lgrad)" wave-slider="#ffaaff" wave-options='{"samples": 100, "type": "steps", "top": 0, "animation": false }'></wave-audio-path-player>
<script type="module" src="https://jerosoler.github.io/wave-audio-path-player/wave-audio-path-player.umd.js"></script>

<script>
setTimeout( () => { 
const lgrad = document.getElementById("lgrad");
const eles = [...document.getElementsByTagName("wave-audio-path-player")];
eles.forEach(ele => {
    ele.shadowRoot.querySelector('#svg > defs').appendChild(lgrad.cloneNode(true));
});

}, 500);
</script>

</body>
</html>
hugolpz commented 6 months ago

Thank you @Jerosoler, From what i understand from your tests :

Right ?

jerosoler commented 6 months ago

Last work on chrome and firefox

hugolpz commented 5 months ago

Looks good to me. https://jsfiddle.net/hugolpz/s8b0grfp/3/ Your answer satisfy my technical need, thank you. We can close this issue. I let you see it it should be integrated into your library.

Note: I used the following open licence audio file to showcast your library, could be handy to you as well.

{
  title:  "The Use of Flowers Birds and All Nature, Vol. IV, No 1, July 1898",
  filename: "Birds and All Nature 1898-07 17 various.ogg",
  licence: "Public Domain",
  duration: "1 min 21 s",
  description: "https://commons.wikimedia.org/wiki/File:Birds_and_All_Nature_1898-07_17_various.ogg",
  mp3: "https://upload.wikimedia.org/wikipedia/commons/transcoded/6/65/Birds_and_All_Nature_1898-07_17_various.ogg/Birds_and_All_Nature_1898-07_17_various.ogg.mp3"
}