Question

所以我正在构建一个反应页面，您可以在后台选择几种不同的音乐选择。我有npm的反应声音。它工作得很好我在网上找到了一个例子，我用这个人链接到一个音轨在线测试全部。太简单！花了10分钟完全按我想要的方式设置它在我的应用程序中。现在，我无法弄清楚如何在网络上的某个地方托管一个轨道，我可以简单地访问它的网址，因此反应声音可以播放音频。有什么建议？免费？这个网站访问量很少。只是一个个人项目。 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。如果您的流量很高，请使用CloudFront之类的CDN，可以在S3存储桶前配置。

希望在线托管.mp3或wav文件以与react-sound一起使用。通过网址访问。

1 个答案: