Fix npm publish for player

This commit is contained in:
Djkato 2023-05-22 00:10:41 +02:00
parent 5de339ff47
commit 5d672c273e
7 changed files with 109 additions and 13 deletions

View file

@ -17,4 +17,4 @@ Run `npx nx build player` to build the player.
## Publish ## Publish
First build, then `npm publish --access=public` First build, then run `npm run publish-[package]`(scripts)

View file

@ -2,7 +2,9 @@
"name": "@euterpe.js/source", "name": "@euterpe.js/source",
"version": "0.0.0", "version": "0.0.0",
"license": "MIT", "license": "MIT",
"scripts": {}, "scripts": {
"publish-player": "cd dist/packages/player && npm publish --access=public"
},
"private": false, "private": false,
"devDependencies": { "devDependencies": {
"@nx/cypress": "16.2.1", "@nx/cypress": "16.2.1",

View file

@ -25,6 +25,6 @@
] ]
}, },
"include": [ "include": [
"src" "src",
], ],
} }

75
packages/player/README.md Normal file
View file

@ -0,0 +1,75 @@
# Euterpe.js Player
A simple, safe AudioContext web music player.
### How to use
##### Full demo at [github link](https://github.com/euterpe-js/euterpe-source/tree/master/packages/player-web-test)
Euterpe player is very Rust inspired, meaning there's always a safer function. `play()`,`play_async()` and `try_play_async()` for example. The goal is to provide the developer with knowledge of what happened when they ran the function, so they can decide what to do if it failed or succeeded.
```js
import { MusicPlayerBuilder } from "@euterpe/player";
const audio_el = document.querySelector("#audio")
const music_player_builder = MusicPlayerBuilder(audio_el)
music_player_builder.start()
// Builder allows for attaching custom nodes if necessary, eg.
const panning_node = music_player_builder.add_stereo_panner_node()
panning_node.pan.value = -0.4
const wave_shaper_node = music_player_builder.add_wave_shaper_node()
waves_shaper_node.oversample = '4x'
const music_player = music_player_builder.build()
//Next we add a song URL to the Audio Element,
music_player.try_new_song_async(encodeURI("my_song.ogg"))
.then(() => {
//and wait for the user input to resume the AudioContext
document.querySelector("#play")?.addEventListener("click", () => {
music_player.play_async()
.then(
//Easily follow up with what to do next
() => { console.log("Playing!") },
(e) => alert("Failed to play, " + e)
)
})
})
```
It's quite easy to give user the control in UI
```js
// Play when user clicks a <button></button>
document.querySelector("#play-button")?.addEventListener("click", () => {
music_player.play_async()
.then(() => { console.log("Playing!") }, (e) => alert("Failed to play, " + e))
})
// Mute when user clicks another <button></button>
document.querySelector("#mute")?.addEventListener("click", () => {
music_player.mute()
})
// Easily give volume control via <input type="range" min="0" max="1" value="1" id="volume" step="0.01">
document.querySelector("#volume")?.addEventListener("input", (e) => {
music_player.change_volume(e.target?.valueAsNumber)
})
```
Euterpe Player also provides functions to easily track the status of playback. It does this via Subscription/Publisher pattern which publishes every frame ( Using `requestAnimationFrame()`). This allows for always up todate values reflecting on the UI.
```js
// Subscriptions to AudioContext changes, eg. time..
music_player.subscribe_to_formatted_duration_time((time) => {
//time == "4:53, "15:59", "1756:15:59"...
document.querySelector("#duration-text").innerHTML = time
//duration but in "0","1.2", "1223.21668181"... format
document.querySelector("#input-seek-range").max = "" + music_player.get_current_duration()
})
//Keep the current time uptodate but formatted.
music_player.subscribe_to_formatted_current_time_tick((time) => {
//time == "2:52", "10:59:59"...
document.querySelector("#current-text").innerHTML = time
})
//Keep <input type="range"..> slider uptodate
music_player.subscribe_to_time_tick((time) => {
//time == "0","1.2", "1223.21668181"...
document.querySelector("#input-seek-range").value = "" + time
})
```

View file

@ -1,5 +1,25 @@
{ {
"name": "@euterpe.js/player", "name": "@euterpe.js/player",
"version": "0.0.1", "version": "1.0.2",
"type": "commonjs" "type": "commonjs",
"description": "A simple, safe AudioContext web music player",
"main": "index.ts",
"author": {
"name": "Djkáťo",
"email": "djkatovfx@gmail.com"
},
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://github.com/euterpe-js/euterpe-source.git"
},
"homepage": "https://github.com/euterpe-js/euterpe-source#readme",
"keywords": [
"audio",
"player",
"music-player",
"audio-visualizer",
"webaudio",
"vizualizer"
]
} }

View file

@ -13,7 +13,9 @@
"outputPath": "dist/packages/player", "outputPath": "dist/packages/player",
"main": "packages/player/src/index.ts", "main": "packages/player/src/index.ts",
"tsConfig": "packages/player/tsconfig.lib.json", "tsConfig": "packages/player/tsconfig.lib.json",
"assets": [] "assets": [
"packages/player/README.md"
]
} }
}, },
"publish": { "publish": {
@ -33,9 +35,5 @@
] ]
} }
} }
}, }
"tags": [ }
"'audioContext",
""
]
}

View file

@ -8,7 +8,8 @@
] ]
}, },
"include": [ "include": [
"src/**/*.ts" "src/**/*.ts",
"README.md"
], ],
"exclude": [ "exclude": [
"jest.config.ts", "jest.config.ts",