Fix npm publish for player
This commit is contained in:
parent
5de339ff47
commit
5d672c273e
7 changed files with 109 additions and 13 deletions
|
@ -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)
|
|
@ -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",
|
||||||
|
|
|
@ -25,6 +25,6 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"include": [
|
"include": [
|
||||||
"src"
|
"src",
|
||||||
],
|
],
|
||||||
}
|
}
|
75
packages/player/README.md
Normal file
75
packages/player/README.md
Normal 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
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
|
@ -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"
|
||||||
|
]
|
||||||
}
|
}
|
|
@ -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",
|
|
||||||
""
|
|
||||||
]
|
|
||||||
}
|
|
|
@ -8,7 +8,8 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"include": [
|
"include": [
|
||||||
"src/**/*.ts"
|
"src/**/*.ts",
|
||||||
|
"README.md"
|
||||||
],
|
],
|
||||||
"exclude": [
|
"exclude": [
|
||||||
"jest.config.ts",
|
"jest.config.ts",
|
||||||
|
|
Loading…
Reference in a new issue