CODEWITHSUNDEEP
javascriptaudiometeor
Fred J.
Fred J.

Reputation: 6049

Meteor to play audio file not in the "public" folder

This Meteor app running on Windows 10, allows user to drill down a tree of directories of 3 levels to finaly select a audio file to play or download.

Initially I placed the directories under meteor 'public' folder but that made the restarting of the app very slow during development, since the public folder size became 20GB (nearly 400 audio files), this problem was fixed by removing the audio files from the public folder and to an external directory on the development machine and placed an absulute link to an audio file as the value of the source tag src attribute on the page (just to try) but it did not play.

I played around with the file name replacing with the '/' and the '\' but for no avail.

Please see image of browser inspector.enter image description here

Any idea how to store the audio files externally and command the client page to play the file now on the dev. machine and later in the production machine, and even if I store the files on a differnet machine online?

Thanks

// and in the template event
        let play = playButton(link)
        let download = downloadLink(link)

        let parent = document.createElement('div')
        parent.setAttribute('id','parent')
        parent.appendChild(play)
        parent.appendChild(download)
        $(event.target).append(parent)
        
//and in the playButton(link)


function playButton(link){
  let play = document.createElement('div')
  play.setAttribute('id', 'left')

  let playButton = document.createElement('audio')
  playButton.setAttribute('controls','')
  playButton.setAttribute('preload', 'metadata')
  playButton.setAttribute('class','audioButton')

  let butSource = document.createElement('source')
  butSource.setAttribute('src', link)
  butSource.setAttribute('type','audio/mpeg')

  let textnode = document.createTextNode('Your browser does not support the mp3 format.')

  playButton.append(butSource)
  playButton.appendChild(textnode)
  play.append(playButton)
  return play
}
<template name="tree">
  <ol>
    {{#each item in result}}
      <li class="pointer" data-type={{item.type}} data-order={{item.order}}>{{item.title}}</li>
    {{/each}}
  </ol>
</template>

Upvotes: 0

Views: 151

Answers (1)

Fred J.
Fred J.

Reputation: 6049

The solution that worked for me is to run XAMPP apache server as well, which served the audio files when a link in the meteor page is clicked.

In development: http://localhost/, In productin: XAMPP ip address\xampp\htdocs\Audio then concatenate nd the rest file path.

XAMPP Cross Origin Resource Sharing may need to be anabled to download the file.

Upvotes: 0

Related Questions