反応音で使用するために.mp3またはwavファイルをオンラインでホストすることを検討しています。 URLを通じてアクセス可能。

Question

私はリアクションページを作成しています。そこでは、バックグラウンドで実行するいくつかの異なる音楽の選択肢を選択できます。 npmの反応音が流れています。それは素晴らしい例で、私はオンラインでの例を見つけました。私は、オーディオトラックをオンラインでテストしてみました。とても簡単！私はそれが私のアプリでそれをしたいと正確に設定するために10分かかりました。さて、私はウェブのどこかでトラックをホストする方法を考え出すことができません。私は簡単なURLを訪問することができますので、反応音がオーディオを再生することができます。助言がありますか？無料で？このサイトにはごく少数の訪問があります。ちょうど個人的なプロジェクト。 React-soundは.mp3または.wavでURLを取得します。例： "http://www.nihilus.net/soundtracks/Static%20Memories.mp3"どの作品！

コード：

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

特別何もする必要はありません。どんな静的HTTP/HTTPSホスティングでも可能です。

見つけたとおり、これを行う一般的な方法はS3です。トラフィックが多い場合は、S3バケットの前に設定できるCloudFrontのようなCDNを使用してください。