jessuni / shikwasa Goto Github PK

Hey!

Thank you for making this incredible player. I've been searching for one that hides the file from the DOM and this one served that purpose but now I'm curious if it might be possible to also hide or obscure the file from the Network tab. I've seen a lot of people saying that this is basically impossible, however, I've also seen people seemingly falsifying that hypothesis: https://preventdirectaccess.com/extensions/protect-wordpress-videos/

Try opening the network tab, then playing that video. You'll see a link to a .ts video. If you try opening it won't play, nor download the video - rather a file with that name.

If the video keeps playing you see it seems to be pieces of the video that are being streamed.

1. I wonder how they're doing that...
2. I wonder if I could do something similar with shikwasa?

Or rather just preventing direct access to the file, such that if the user opens the direct link, they're redirected to the page with the player.

Hi @jessuni

I came across one issue in my project, the buttons of the player was missing when another player destroyed.

And I found the issue is that the icons will only has one instance in DOM tree, and when one player destory, the icons' svg will also destroy, therefor will affect another player in the page.

constructor(options) {
    this.mounted = false

    // because of this line, can only has one icons in dom tree.
    if (!document.querySelector('.shk-icons')) {
      this.icons = createElement({
        className: 'shk-icons',
        innerHTML: IconComp,
      })
    }
    this.initEl()
    this.initOptions(options)
}

mount(container, supportsPassive) {
    // ...
    if (this.icons) {
      container.append(this.icons)
    }
   // ...
  }

Shikwasa is awesome, thanks for your work. 🙏

Hi @jessuni ,

I am trying to create an embed of the Shikwasa audio player and then use an iframe to play it on my website similar to how other podcast players work.

But I see an issue happening here, whenever I create an iframe of the page containing Shikwasa player, the cover is not being show. For example this is the normal webpage with only shikwasa player http://api.peervadoo.com/embed_audio . Then I have created a new page using iframe of the above webpage here http://api.peervadoo.com/test_embed_audio .

As you can see, test_embed_audio has no cover image and some white space is added to top while the normal webpage version works fine. Can you kindly let me know what could be the issue here and if any workaround ?

It would be great if there was a plugin to return the number of seconds each sound played. This value is very useful in the admin panel to check the popularity of a voice.

When I create the first player everything works fine but trying to create a second player causes an error TypeError: Cannot redefine property: chapters this stops a second player from being created.
Full stack trace
Uncaught TypeError: Cannot redefine property: chapters at Function.defineProperties (<anonymous>) at Chapter.patchPlayer (bundle.js:102149:12) at Chapter.init (bundle.js:102092:10) at bundle.js:102103:14 at bundle.js:103025:39 at Array.forEach (<anonymous>) at Events.trigger (bundle.js:103025:25) at Player.update (bundle.js:103421:19) at Player.initAudio (bundle.js:103244:12) at new Player (bundle.js:103082:10)

An example of how I am creating the player, this is triggered by button press when a user needs to create a player.

const chapters = [
      { title: 'First Chapter', startTime: 0, endTime: 2 },
      { title: 'Second Chapter', startTime: 2, endTime: 4 },
]


Shikwasa.use(Chapter)
      const player = new Shikwasa({
        container: () => document.querySelector('#e' + widgetID),
        audio: {
          title: titleTmp,
          artist: artist,
          cover: require('./testPic.jpeg'),
          src: require('./testFile.mov'),
          Chapter: chapters
        },
        theme: theme,
        themeColor: themeColour,
      })

I've checked all the variables exist and so do the test files. Thanks

I'm a big fan of the design under 640px.
Would it be possible to force this design independently of viewport size?

I tried using shikwasa on my blog and found that the podcast cannot be played under Firefox, but it works well on Edge (chromium), I tried on another website that uses shikwasa (https://buzaichang.xyz/episodes/four-women) tried it and found that the problem was also reproduced.

First, thank you for this wonderful package! I love this player and I'm planning to use it on a project that allows the user to switch between live streams and on-demand podcasts. The player works with some modifications, namely disabling the seek bar and time display. Currently I'm doing this in Vue.js using a computed state property that sets an .is-live class to the wrapper div and adding this CSS to hide the components:

.is-live .shk-bar_wrap, 
.is-live .shk-display {
  display: none;
}

This works somewhat well but I'd like to see official support. I also have to use the internal updateAudioData method instead of the update method to change the track display because update interrupts playback.

Good job with the player. @jessuni
I'd love to invite you to Musicoin Project at https://musicoin.org to join an experiment project at pod.musicoin.org (upcoming), to jointly develop a podcasting community.

join our slack https://join.slack.com/t/musicoin/shared_invite/enQtNzEyODU1NjkyMDk2LWNjZjY4OTY5ZWIxNzllZWZjYThkYTMyYzdiMTBlODQwYzdhOWJkZTI3MWY4OTZkODVkNDZmOGUyMmRmOTE4ODA if you are interested.

My function is declared as follow for my hexo podcast. Shikwasa is fabulous. Love the design.

hexo.extend.tag.register('podplayer', function (args) {
    return `
    <div class="podcast"></div>\
    <script>\
        const player = new Shikwasa({
            container: () => document.querySelector('.podcast'),\
            audio: {\
                title: '${this.title}',\
                artist: '${this.author}',\
                cover: '${this.image}',\
                src: '${this.media}',\
            },\
            fixed: {\
                type: 'static',\
            },\
        });\
    </script>`
});

Then, I want to add my chapters options. They are in a nested array of ${this.chapters}, the data structure look like this:

chapters:
  [
    ["00:00:00.000", "Title 1"],
    ["00:00:30.000", "Another title"]
  ]

I can access them by index, e.g. ${this.chapters[0][1]} ,${this.chapters[0][0]} and ${this.chapters[1][0]}, etc.

By substituting the corresponding element with title, startTime, endTime.

chapters: [
      { title, startTime, endTime }, // the first chapter
      { title, startTime, endTime }, // the second chatper
],

I get something like this ⬇️

chapters: [
  { ${this.chapters[0][1]}, ${this.chapters[0][0]}, ${this.chapters[1][0]} }, // the first chapter
  { ${this.chapters[1][1]}, ${this.chapters[1][0]}, ${this.chapters[2][0]} }, // the second chapter
{ ${this.chapters[1][1]}, ${this.chapters[1][0]}, ${this.chapters[2][0]} }, // the second chatper
  { title, startTime, endTime }, // the third chatper
],

Is there a way I can use a for loop to iterate my chapters? So that one line of code would be able to generate all my chapters automatically.

chapters: [
   { ${this.chapters[i][1]}, ${this.chapters[i][0]}, ${this.chapters[i+1][0]} }, // i to n chapter
],

I've tried using <% %> tags but have no luck.

<script type="text/javascript">
    <% ${this.chapters}.forEach(function(row) { %>
        console.log("<%= row[1] %>, <%= row[0] %>"); // or anything you want to do.    
    <% }) %>
</script>

It would just output my loop code.

Is this even possible? Any tips or hints will be appreciated. Thx.

Are you planning to implement previous and next button in this?

After getting this project working with TS and React i have managed to create the audio widget and everything works fine except for chapters which are always shown below the audio player and the close button dosen't seem to work and neither does the view chapters btn.
I have checked to make sure that no other styles are being applied accidentally and I have made sure that the start and end time for the chapters is less than the duration of the file and just in case I have tried using the position and type properties.
Thanks

Hello,

Amazing work! Very impressed. Please excuse my noob questions as I`m quite new to podcasts and I am trying to setup a PoC project.

1. Is it possible to add these "waveforms" (like SoundCloud has)?

2. Is it possible to add volume control?
3. Is it possible to add download button?
4. Ultimately, some sharing buttons?

Happy to pitch in with whatever I can, cashflow or code (need to learn more about audio files first lol).

Many thanks!

While destroying the player instance, the player throws an error.

To reproduce the problem, follow these steps:

1. Create a player instance first.
2. Destroy instance(player.destroy()) .

Or visit this js-fiddle link where this issue is reproducing.
Please investigate this.

Hi there! I'm a longtime admirer of this project, and have been waiting for an opportunity to use it.

I recommended the player to someone on a forum, and the person asked about a media player that could update automatically when the RSS feed is changed.

I don't know of any media player libraries that do this, and thought that the feature would be a good idea for this player since it's focused on podcasts.

Piggybacking on the playlist feature request #28: I would love if the playlist updated automatically using the podcast RSS, and if the latest "track" was the newest episode (or the first episode -- however the dev decides to set it up).

Pocket casts supports chapter navigation while streaming podcast, so I think it's feasible.

Hello. Please excuse me, but I'm quite new to JavaScript.

I made my first player Shikwasa for the Survivor Memories website. However, I have absolutely no idea how I can add timecodes.

For example, how can I add the timecode "05:06 She talks about herself"?

https://codepen.io/andriy-smkhtkn/pen/PoezOQr

I don't know how to use that:

anchor.addEventListener('click', (e) => {
    const href = e.target.getAttribute('href')
    const time = formatTime(href)
    instance.seek(time)
    instance.play()
  })

Excuse me again!

Have a good day.

Using /dist the svg images for download, rewind, forward, and volume are not visible in the player. ThemeColor has been declared in the script creating an instance of the player and is correctly applied to all other elements. Same faulty behavior using Safari 12 and Chrome build 77.0.3865.120. Can you please help?

Text scrolling animation does not update after updateMetadata is called.

import React, { Component } from 'react';
import Shikwasa from 'shikwasa';

export default class TestPage extends Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
componentDidMount() {
let player = new Shikwasa({
fixed: {
type: 'auto',
position: 'bottom',
},
container: this.myRef.current,
transitionSpeed: 3,
themeColor: '#00869B',
autoPlay: false,
muted: false,
preload: 'metadata',
speedOptions: [0.5, 0.75, 1.25, 1.5],
audio: {
title: 'Hello World!',
artist: 'Shikwasa FM',
src: 'http://www.music.helsinki.fi/tmt/opetus/uusmedia/esim/a2002011001-e02-128k.mp3',
},
})
}

render() {
return (

Thanks for the player!

I'd like to start playing from a particular position as soon as the player is ready but I had an issue where calling seek on a newly loaded player wasn't working. I found I had to delay the seek to give the player time to load enough audio to get a duration value e.g.

                       let ss = setInterval(() => {
				if(player.duration > 0) {
					clearInterval(ss);
					player.seek(lastPlayTimeSec);
				}
			},500);

Could an additional seek property be added to TAudio to specify the start position?

I just installed this through npm, and by default the progress bar seems to be set at display: none. The "live" button is also visible, even though I've set live to false.

I will be fixing this with some CSS overrides, but it seems like weird behavior.

When player position is set to fixed I have to set z-index on .shk otherwise content behind the player is visible.

Example:

.container .shk {
   z-index: 1;
}

I notice that .shk-player has z-index: 10 but it doesn't seem to make a difference....

I'm using Firefox 108 on Fedora Linux.

Bug: when passing a cover image to the player, the cover does not show up in the Chrome mini-player.

Example:
https://shikwasa.js.org/

Example of working cover:
https://www.noco.fm/podcasts/cdd584da-0ba6-49b4-b128-859ec32e4bef

In the demo (https://shikwasa.js.org/), I don't see a way to increase/decrease the volume. The only thing I can do is to mute/unmute. I wonder if this feature (adjusting volume) is not supported by the player, or it's just that the demo didn't cover it.

PS: This player is quite sleek and handy for podcast. Well done.

It would be a very handy feature to make the player templates customizable.

The player is based on templates already:
https://github.com/jessuni/shikwasa/tree/main/src/templates
But it's referenced internally at the moment.

I could imagine the following:

const TemplateChapter = `... my fancy markup ...`
const TemplateIcon = `...`
const TemplatePlayer = `...`

// or with an import (a bit cleaner)
import { TemplateChapter, TemplateIcon, TemplatePlayer  } from './shikwasa-templates.js';

const player = new Shikwasa({
    container: () => document.querySelector('.shikwasa-player'),
    tplChapter: TemplateChapter,
    tplIcon: TemplateIcon,
    tplPlayer: TemplatePlayer,
    audio: {
        title: '...', 
        artist: '...',
        cover: '...',
        src: '...',
        },
});

Sometimes it is necessary to change the icons or change the structure of the layout fundamentally, which would be easy to do in this case.

Hi! This is the most beautiful podcast player I have seen! I didn't find mentions about playlists in the roadmap, will be they added? This will be really wonderful!

I have installed the latest version of shikwasa with npm but we are currently using TS and I have seen on your roadmap that TS is something you are working on, is it possible to get early access to the TS version. Thanks

Hey, thanks for this cool project. I tried to run an example and it was working great but I was not able to change theme color or theme using options. To test it out I tried to build the project but the build is failing.

Can you kindly let me know the way to build the project ? I tried to run "npm run build" but it gives me the below error

[email protected] build C:\Users\srini\Downloads\shikwasa
npm run build:main && npm run build:chapter

[email protected] build:main C:\Users\srini\Downloads\shikwasa
TARGET=main rollup -c

'TARGET' is not recognized as an internal or external command,
operable program or batch file.

Would love to have the ability to add small links/buttons to allow user to subscribe/share from the audio player itself using an overlay similar to other popular audio players on the market

greetings!

I am trying to upgrade shikwasa to v2.2.0 at here, but I noticed that the css file cannot be imported properly with the following error msg

import "shikwasa/dist/style.css";
import { Chapter, Player } from "shikwasa";

...

...
ERROR in ./src/podcastPlayer/index.js 1:0-33
[30](https://github.com/IvanWoo/subjpop.github.io/actions/runs/4157082134/jobs/7191312599#step:7:31)
Module not found: Error: Package path ./dist/style.css is not exported from package /home/runner/work/subjpop.github.io/subjpop.github.io/node_modules/shikwasa (see exports field in /home/runner/work/subjpop.github.io/subjpop.github.io/node_modules/shikwasa/package.json)
[31](https://github.com/IvanWoo/subjpop.github.io/actions/runs/4157082134/jobs/7191312599#step:7:32)
 @ ./src/index.js 5:0-50 11:2-21

seems like it's related to the exports field of package.json

I can import the css after removing the exports part based on the discussion at here

I don't mind opening a pr for it, but not sure if it's the right way going forward b/c it might break commonjs import

thanks!

Is it possible to add a waveform animation for the audio player similar to other popular podcasting players ?

This would provide a great boost to the look of the player.

Thanks in advance.

Hi very good job done on this player,
by any chance can you add play in background if its loaded in a webview for a mobile app ?

I've tried with multiple mp3 files. Whenever I click in the seeking bar, the audio jumps to the start.
Any idea why this could be?