Play local files

[saraivinha85]

Is Howler able to play local files? I'm passing the full path i.e. "/Users/xpto/Music/xpto.ogg" and it's not working.

[Stenerson]

You're probably running into a sandboxing issue. If you're serving the web pages locally you can probably use relative paths but you likely can't access local files as a security measure.

See this SO answer for more details.

[hector]

I was searching for a solution to read a local file but instead of directly using a local pathusing an <input type="file" > where the web users selects the file. I will write it just in case it helps somebody:

HTML:

<input type="file" onChange="onChange">

Javascript:

function onChange(event) {
  // Read the file from the input
  if (event.files.length > 0) {
    var file = event.files[0];
    var reader = new FileReader();
    reader.addEventListener('load', function() {
      var data = reader.result;
      // Create a Howler sound
      var sound = new Howl({
        src: data,
        format: file.name.split('.').pop().toLowerCase(); // always give file extension: this is optional but helps
      });
    };
    reader.readAsDataURL(file);
}

[PlkMarudny]

Indeed, the above works.

[HotMonkeyWings]

This might be late, but to whoever this may help: Place the .mp3 file in public/

Then, access your mp3 file in Howler by defining src as /nameofthemp3.mp3

This is indeed due to permission restrictions on react

Also, we don't need howler to play audio in react anymore. You can juse use

let audio = new Audio('/nameofthemp3.mp3')
audio.play()

[LeyserPinto]

Hi Guys, i too was this problem.

To resolved it i used part of friend Hector coding idea.

I used FileReader() to create a object into Web Browser and can play the sound.

Currently, I working with ReactJS And TypeScript.

It's the way that i encode the Sound

Home.tsx Component

const HandleAudioChange=(e:any)=>{

    // Read the file from the input
  if (e.target.files.length > 0) {
    const file = e.target.files[0];

    if (!file) return;

    let reader = new FileReader();

    reader.readAsDataURL(file)

    reader.onload = () => {
      Howler.HandleMount(reader.result)
    }

    reader.onerror = () => {
      console.log(reader.error)
    }

  }

}

Also i can Build a small module where i Writting some HowlerJS Functions

import {Howl, Howler} from 'howler';

let handler:Howl

//Handle Create Files
export const HandleMount=(audio:any)=>{

    !handler ? handler = new Howl({
        src: [audio],
        volume: 0.5
    }) : (
        handler.unload(),
        handler = new Howl({
            src: [audio],
            volume: 0.5
        })
    )
}

//Play the sound
export const HandlePlay=()=>{

    !handler ? console.log('Not Load Music'):handler.play()

}

//Pause te Sound
export const HandlePause=()=>{
    !handler ? console.log('Nothing Interesting Happens'): handler.pause()
}

//Handle Sound Volumen
export const HandleVolume=(vol:number)=>{

    !handler ? console.log('Nothing Interesting Happens') : handler.volume(vol)

}