https://github.com/brainlid/sing

Phoenix LiveView demo application for playing audio sound effects
https://github.com/brainlid/sing

audio liveview sound-effects

Last synced: about 2 months ago
JSON representation

Phoenix LiveView demo application for playing audio sound effects

• Host: GitHub
• URL: https://github.com/brainlid/sing
• Owner: brainlid
• License: other
• Created: 2024-01-11T22:39:35.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-08-25T14:59:33.000Z (about 1 year ago)
• Last Synced: 2025-04-19T20:32:57.458Z (6 months ago)
• Topics: audio, liveview, sound-effects
• Language: Elixir
• Homepage: https://fly.io/phoenix-files/making-phoenix-liveview-sing/
• Size: 1.8 MB
• Stars: 7
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Sing

A Phoenix LiveView demo application showing how to add sound effects to a LiveView page. Sound effects are linked to button clicks and played locally in the browser, while other sound effects can be triggered by the server.

The solution uses the [Howler.js](https://www.npmjs.com/package/howler) library in the browser, making it a mobile friendly solution as well.

Article that further explores this topic: [Making Phoenix LiveView Sing!](https://fly.io/phoenix-files/making-phoenix-liveview-sing/).

## Demo Video

Check out the demo video to see what it does. Make sure your sound is turned on!

[![Sound effect Youtube demo video](./YoutubeLinkImage.png)](https://www.youtube.com/watch?v=0ySoGdGPSyA)

## Steps to run

- Clone or download the project

- Download the needed JS package: `cd assets; npm i`

- `mix deps.get; mix compile`

- Run the project: `mix phx.server`

- Visit the [Settings page](http://localhost:4000/settings)

## Steps to duplicate

This process is covered in greater detail in the [Fly.io blog](https://fly.io/phoenix-files/) article [Making Phoenix LiveView Sing!](https://fly.io/phoenix-files/making-phoenix-liveview-sing/).

The following is a rough outline of the steps taken to add this approach to a project.

- add `assets/js/hooks/audio_mp3.js`

- update `app.js` to load the hook file

- ensure `app.js` loads hooks when `new LiveSocket` is created

- add Howler from npm

  - `cd assets; npm i howler` adds to `package.json`

- `mix esbuild.install`

- add HTML code for hook to page, output sounds in HTML `data-sounds`

- add `assign_sounds` to mount in LiveView

- add `priv/static/audio/` and some audio files.

- update `lib/sing_web.ex` to add `audio` to the list of static folders

- add sound related code in `index.ex`

- add sound related code in `index.html.heex`

- add delayed sound event pushed from server.

**Note:**

In a real application, could use Ecto schemas to validate user inputs and limits. This is trying to keep the demo as simple as possible.