cherchant à héberger des fichiers .mp3 ou wav en ligne pour les utiliser avec un son de réaction. accessible par url.

Question

Donc, je construis une page de réaction où vous pouvez choisir entre quelques choix de musique différents à exécuter en arrière-plan. J'ai le son de réaction de npm. Cela fonctionne très bien, j'ai trouvé un exemple en ligne et j'ai utilisé ce lien de gars à une piste audio en ligne pour tester tout cela. Si facile! J'ai pris 10 minutes pour le configurer exactement comme je le voulais dans mon application. Maintenant, je ne peux pas comprendre comment héberger une piste quelque part sur le web où je peux simplement visiter son URL afin de réagir-son peut jouer l'audio. Aucune suggestion? Gratuitement? Ce site aura très peu de visites. Juste un projet personnel. React-son prend une url avec .mp3 ou .wav. Exemple: "http://www.nihilus.net/soundtracks/Static%20Memories.mp3". Ce qui fonctionne!

Le code:

import React, { Component } from 'react'; 
import Sound from 'react-sound'; 
import { Audio } from 'redux-audio'; 
import { connect } from 'react-redux'; 
import muiThemeable from 'material-ui/styles/muiThemeable'; 
import * as actions from '../actions'; 
import OptionsForm from './options/OptionsForm'; 
import Login from './Login'; 
import Profile from './Profile'; 

class Landing extends Component { 
    onChangeForm({ theme, genre }) { 
     this.props.setTheme({ theme }); 
     if (genre === 'silence') { 
      this.props.setAudio({ genre, status: 'STOPPED' }); 
     } else if (genre) { 
      this.props.setAudio({ genre, status: 'PLAYING' }); 
     } 
    } 

    async componentDidMount() { 
     await this.props.fetchUser(); 
     if (this.props.auth && this.props.auth.options.length > 0) { 
      const { theme, genre } = this.props.auth.options[0]; 
      this.props.setTheme({ theme }); 
      if (genre === 'silence') { 
       this.props.setAudio({ genre, status: 'STOPPED' }); 
      } else if (genre) { 
       this.props.setAudio({ genre, status: 'PLAYING' }); 
      } 
     } 
    } 

    renderOptions() { 
     if (this.props.auth) { 
      const { 
       options, 
       linkedinDisplayName, 
       googleDisplayName, 
       facebookDisplayName 
      } = this.props.auth; 
      switch (options.length > 0) { 
       case true: 
        return (
         <Profile 
          name={ 
           linkedinDisplayName || googleDisplayName || facebookDisplayName 
          } 
         /> 
        ); 
       default: 
        return <OptionsForm onChange={this.onChangeForm.bind(this)} />; 
      } 
     } 

     return <Login />; 
    } 

    // you are here 
    // can you access mp3s from dropbox? 
    renderAudio() { 
     let audioURL = ''; 
     let playStatus = ''; 
     switch (this.props.audioOptions.genre) { 
      case 'dance': 
       audioURL = 'https://clyp.it/0r0v0cdm'; 
       break; 
      case 'rock': 
       audioURL = 'http://www.nihilus.net/soundtracks/Static%20Memories.mp3'; 
       break; 
      case 'folk': 
       audioURL = 'http://hosting.tropo.com/5071426/www/audio/classical.mp3'; 
       break; 
      case 'classical': 
       audioURL = 
        'http://www.mfiles.co.uk/mp3-downloads/mozart-horn-concerto4-3-rondo.mp3'; 
       break; 
      default: 
       audioURL = ''; 
       break; 
     } 

     if (this.props.audioOptions.status === 'PLAYING') { 
      playStatus = Sound.status.PLAYING; 

      return (
       <Sound 
        url={audioURL} 
        playStatus={playStatus} 
        // playFromPosition={300 /* in milliseconds */} 
        // onLoading={this.handleSongLoading} 
        // onPlaying={this.handleSongPlaying} 
        // onFinishedPlaying={this.handleSongFinishedPlaying} 
       /> 
      ); 
     } 
    } 

    render() { 
     return (
      <div> 
       {this.renderAudio()} 
       {this.renderOptions()} 
      </div> 
     ); 
    } 
} 

function mapStateToProps({ auth, audioOptions }) { 
    return { auth, audioOptions }; 
} 

export default connect(mapStateToProps, actions)(muiThemeable()(Landing)); 

Answer 1

Rien est nécessaire spécial. Tout hébergement HTTP/HTTPS statique fera l'affaire.

Comme vous l'avez constaté, S3 est un moyen courant de le faire. Si votre trafic est important, utilisez un CDN comme CloudFront, qui peut être configuré devant votre compartiment S3.