jessuni / shikwasa Goto Github PK
View Code? Open in Web Editor NEWAn audio player born for podcast
Home Page: https://shikwasa.js.org
License: MIT License
An audio player born for podcast
Home Page: https://shikwasa.js.org
License: MIT License
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
While destroying the player instance, the player throws an error.
To reproduce the problem, follow these steps:
player.destroy()
) .Or visit this js-fiddle link where this issue is reproducing.
Please investigate this.
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.
Are you planning to implement previous and next button in this?
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
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?
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.
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
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?
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.
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.
Happy to pitch in with whatever I can, cashflow or code (need to learn more about audio files first lol).
Many thanks!
Text scrolling animation does not update after updateMetadata
is called.
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.
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).
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. ๐
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.
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
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.
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 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 ?
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.
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.
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
Lines 10 to 14 in ecf7a3e
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!
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?
Pocket casts supports chapter navigation while streaming podcast, so I think it's feasible.
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.
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.
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 (
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.
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 ?
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.
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
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.
I'm a big fan of the design under 640px.
Would it be possible to force this design independently of viewport size?
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.