render() { return ( <div id="audio"> <audio id="sf2" src="https://jennicorbus.com/audio/hadouken.mp3" type="audio/mp3"></audio> <audio id="kon" src="https://jennicorbus.com/audio/stage-clear.mp3" type="audio/mp3"></audio> <audio id="dkc" src="https://jennicorbus.com/audio/tagged.mp3" type="audio/mp3"></audio> <audio id="nemo" src="https://jennicorbus.com/audio/nemo.mp3" type="audio/mp3"></audio> <audio id="beep" src="https://jennicorbus.com/audio/select.wav" type="audio/wav"></audio> <audio id="click" src="https://jennicorbus.com/audio/mouse-click.mp3" type="audio/mp3"></audio> </div> ) }
render() { return ( <audio refs='audio' src={this.props.src} playing={this.props.playing} /> ) }
render() { return ( <div> {this.props.payload.format === 'video' ? <video width="1050" height="580" autoPlay controls> <source src={this.props.payload.url} type="video/mp4" /> </video> : <audio autoPlay controls> <source src={this.props.payload.url} type="video/mp4" /> </audio>} </div> ); }
render() { return ( <div className="Track"> <div className="Track-information"> <h3> {this.props.track.name} </h3> <p> {this.props.track.artist} | {this.props.track.album} </p> </div> <audio controls className="Play"> <source src={this.props.track.preview} type="audio/mpeg"></source> </audio> {this.renderAction(this.props.isRemoval)} </div> ); }
forwardRef(({ mediaSrc, mediaType }, ref) => ( <audio ref={ref} preload="metadata" src={AUDIOFX_DIR + mediaSrc} type={`audio/${mediaType || 'mp3'}`} /> ))
render() { return this.state.playSound ? <audio src="/sound/notification.mp3" autoPlay/> : null; }
render () { return ( <div className="row-fluid"> <h2>Timer</h2> <div className="btn-group" role="group" > <Button time="5" startTimer={this.startTimer}/> <Button time="10" startTimer={this.startTimer}/> <Button time="15" startTimer={this.startTimer}/> </div> <Timer time={this.state.time}/> <audio id="end-of-time" src="flute_c_long_01.wav" preload="auto"></audio> </div> ) }
buildHtml(){ let html = '', musicJson = this.props.musicList, loading= this.props.loading; if(musicJson){ // html = musicJson.map((tracks, index) => (<h1>{tracks.albumId}</h1>)); // musicJson.map((tracks, index) => (<h1>{tracks.albumId}</h1>)) html = musicJson.tracks.map((tracks,index) => ( <div className="audiotrackwrapper"> <div className="audiotrack">{tracks.albumName}<div>{tracks.artistName}</div></div> <div className='audiotrackright'> <audio controls><source src={tracks.previewURL} type="audio/mpeg" /></audio> </div> </div>)); } if(loading){ html = <h1>Composing your favourite music</h1> } return html }
const Example1Container = () => <div> <h4>Example 1: <small className="text-muted">HTML Audio element</small></h4> <audio controls> <source src="/api/v1/track" type="audio/mpeg" /> </audio> <h4 className="text-center mt-5"> <a href="https://github.com/VolodymyrTymets/sound-in-js/tree/master/client/src/components/Example1" target='blank'> See code example here </a> </h4> </div>
render() { return( <audio ref="audio" preload={this.props.preload} volume={this.props.volume} controls={false} crossOrigin="anonymous" autoPlay={this.props.autoplay} loop={this.props.loop} src={this.props.source} /> ) }
render() { const {isPlaying} = this.state return ( <div> <p>Audio Player</p> { isPlaying ? ( <button onClick={this.pause}>Pause</button> ) : ( <button onClick={this.play}>Play</button> ) } <audio id="player" ref="player" onTimeUpdate={this.updateProgress}> <source src={require('../assets/test.mp3')}/> </audio> <progress ref="progress" value="0" max="1" onClick={this.seek}></progress> <div className="duration"> <p><span ref="elapsed">0:00</span>/<span ref="duration">0:00</span></p> </div> <input type="range" min="0" max="100" defaultValue="100" onChange={this.handleVolume}/> </div> ) }
render() { const { streamUrl, mode } = this.props; return ( <audio id="audio" loop={mode === REPEAT} ref={(ref) => { this.audio = ref; }} src={streamUrl} onEnded={this.handleEnded} onTimeUpdate={this.handleTimeUpdate} /> ); }
render() { let { showSignUp, user } = this.state return ( <div className='row HomeContainer justify-content-center align-items-center' > { showSignUp ? <div className='col-md-8'> <h1 className="FadeInAol display-3"> Welcome to Chatter, {user.name} </h1> <audio className="AolSound" controls autoPlay> <source src={aolSound} /> </audio> </div> : <SignUp createUser={this.createUserInfo} removeSignUp={this.toggleShowSignUp} /> } </div> ) }
const AudioType = ({ url, filetype }) => ( <div> <audio controls> <source src={url} type={filetype} /> </audio> <br /> <a href={url} target="blank"> <Icon className="file audio" /> File Link </a> </div> )
render() { return this.state.playSound ? <audio src="/sound/notification.mp3" autoPlay/> : null; }