Cloudcast is a single-page, fullstack, music streaming web application inspired by Mixcloud. Users can share and listen to radio shows, DJ mixes, podcasts, and other long-form audio content.
Cloudcast users can:
- Freely access and listen to a variety of streaming audio programming
- Upload, edit, and delete their own audio programs after creating a personal user account
Cloudcast is and will remain open source.
View the Cloudcast wiki design documents
Users can explore and listen to all audio programming without creating an account. Cloudcast programs are primarily accessible from an indexed list of featured audio content. Upon first play, an audio playback bar loads at the bottom of the page, which persists as the user navigates the site.
From any page in the site, users can create a new account or login, and before uploading content, users are prompted to login. Upon login, users have the option to create new Cloudcast programs, as well as update or destroy their existing content. Any existing Cloudcast program can only be modified by the user who originally contributed it.
Cloudcast follows RESTful API design, and was built using a Ruby on Rails framework and a PostgreSQL database. Users and Casts are the two primary database models, connected via ActiveRecord associations. All uploaded image and audio files are stored with ActiveStorage and Amazon Web Services S3. Data requests are made through AJAX and completed by a JSON API.
class Cast < ApplicationRecord
validates :title, :user_id, presence: true
before_save :ensure_cast_audio, :ensure_cast_image
belongs_to :user
has_one_attached :cast_audio
has_one_attached :cast_image
def ensure_cast_audio
unless self.cast_audio.attached?
errors[:cast_audio] << "Audio must be attached"
end
end
def ensure_cast_image
unless self.cast_image.attached?
self.cast_image.attach(io: File.open('app/assets/images/cloud_default.jpg'),
filename: 'cloud_default.jpg')
end
end
end
Cloudcast is a single page app built with React.js and Redux. All pages are composed of React components, which are rendered at a root url. Users can access uploaded audio content for playback via either the featured audio program feed, dedicated individual program pages, or through user profile pages.
To integrate the different methods for triggering playback, and also to facilitate uninterrupted playback across the app, the Redux store contains current playback state.
const defaultState = {
displayPlaybackBar: false,
playback: false,
playbackId: 0,
muteAudio: false
};
export default (state = defaultState, action) => {
Object.freeze(state);
const newState = merge({}, state);
switch (action.type) {
case RECEIVE_PLAYBACK_CAST:
newState.playbackId = action.playbackId;
newState.displayPlaybackBar = true;
return newState;
case TOGGLE_PLAY_PAUSE:
newState.playback = !newState.playback;
return newState;
case TOGGLE_MUTE_UNMUTE:
newState.muteAudio = !newState.muteAudio;
return newState;
default:
return state;
}
};
The app's PlaybackBar
component receives this information through props,
and current playback state is updated as a user selects play or pause for each audio program.
class PlaybackBar extends React.Component {
constructor(props) {
super(props);
this.state = {
elapsedTime: 0,
percentPlayed: 0,
};
this.audioTag = React.createRef();
this.togglePlayPause = this.togglePlayPause.bind(this);
this.toggleMuteUnmute = this.toggleMuteUnmute.bind(this);
this.updateTime = this.updateTime.bind(this);
}
componentDidUpdate(oldProps) {
if (this.props.playback && !oldProps.playback) {
this.audioTag.current.play();
} else if (oldProps.playbackId != this.props.playbackId) {
this.props.togglePlayPause();
} else if (!this.props.playback && oldProps.playback) {
this.audioTag.current.pause();
}
}
...
}
Real-time audio playback is implemented with an HTML5 Audio element.
Cloudcast is an actively maintained application, and in the future, I plan to:
- Implement audio queuing for continuous audio streaming
- Add user comments and the option to favorite Cloudcast programs
- Include options for audio program genre tags and artist attribute metadata
- Display enhanced audio metadata information during audio playback
Icon design by Swifticons.
Cloudcast accepts all types of radio content including talk & music radio shows, DJ mix sets, and podcasts. If your work has been posted without permission, please contact me for proper attribution or for your content to be removed.