Tone.js Audio File Playback Example

index.html

<section>
	<div id="Content">
		<p>Click on the button to play the audio file on loop using 
		<a href="https://tonejs.github.io/docs/#Player" target="_blank">Tone.Player</a>.</p>
	</div>
</section>

script.js

/* 
https://tonejs.github.io/examples/#player
*/

//the player
var player = new Tone.Player({
	url: "https://assets.codepen.io/212131/Waterfalls.mp3",
	loop: true
}).toMaster();

// GUI //

Interface.Loader();

Interface.Button({
	text: "Start",
	activeText: "Stop",
	start: function() {
		player.start();
	},
	end: function() {
		player.stop();
	}
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/0.10.0/Tone.min.js"></script>
<script src="https://rawcdn.githack.com/Tonejs/Tone.js/r10/examples/scripts/Interface.js"></script>

style.scss

*,
*:before,
*:after {
	box-sizing: border-box;
}

section {
	display: block;
	width: 400px;
	margin: 0 auto;
	padding: 30px;
	#Content {
		.Button {
			display: block;
			margin: 0 0 30px 0;
			padding: 20px 10px;
			height: auto;
			width: auto;
			line-height: 1.2;
		}
	}
}
p {
	margin: 0 0 30px 0;
}

//COLORS
$blue: #3833ED;
$green: #1EDF3E;
$red: #ED3333;
$purple: #7F33ED;
$teal : #22DBC0;
$pink : #ED33CF;
$yellow : #FFFC0C;
$orange : #f5871f;
//SIZES
$margin : 3px;
$sidebarWidth : 280px;
$topbarHeight : 35px;
$padding: 15px;
$fontSize : 14px;

/* FOR MOBILES */
@media (max-width: 750px) {

	#TopBar #Homepage a {
		font-size: 16px !important; 
	}

	#TopBar #Hamburger {
		display: initial!important;
	}

	#Sidebar {
		display: none;
		width: 100%!important;
	}

	iframe {
		width: 100%!important;
	}
}

html, body {
	padding: 0px;
	margin: 0px;
	height: calc(100% - 4px); 
	font-family: "Inconsolata", monospace;
}

/**
 *  
 *  Example Home
 *  
 */
#Content.Example {

	height: calc(100% - #{$topbarHeight + $margin * 3});
	width: calc(100% - #{$margin * 2});
	margin-bottom: 0px;
	overflow: hidden;
	left: $margin;

	#Sidebar {
		background-color: white;
		width: $sidebarWidth;
		position: absolute;
		left: 0px;
		top: 0px;
		height: calc(100% - #{$margin});
		border-right: $margin solid black;
		overflow-y: scroll;
		overflow-x: hidden;

		$catHeight : 25px;
		$itemHeight : 22px;

		.Category {
			background-color: black;
			color: white;
			width: calc(100% - #{$margin * 2});
			height: $catHeight;
			line-height: $catHeight;
			padding-left: 5px;
			font-weight: 900;
		}

		.Item {
			line-height: $itemHeight;
			padding-left: 15px;
			height: $itemHeight;
			width: 100%;

			&:last-child{
				margin-bottom: 10px;
			}
		}

		&.Open {
			display: initial!important;
		}
		z-index: 1;
	}

	iframe {
		width: calc(100% - #{$sidebarWidth + $margin * 2});
		border: 0px;
		position: absolute;
		top: 0px;
		right: 0px;
		height: 100%;
		z-index: 0;
	}

	$sourceHeight: 40px;
	#Source {
		position: absolute;
		bottom: 0px;
		right: 0px;
		width: 80px;
		height: $sourceHeight;
		background-color: black;
		color: white;
		opacity: 0.5;
		cursor: pointer;
		z-index: 0;

		&:before {
			position: absolute;
			width: 100%;
			height: 100%;
			content : "source";
			text-align: center;
			line-height: $sourceHeight;
		}

		&:hover {
			opacity: 1;

			&:active {
				background-color: white;
				color: black;
			}
		}
	}
}


/**
 *  
 *  TOP BAR
 *  
 */
#TopBar {
	background-color: black;
	height: $topbarHeight;
	margin: $margin;
	position: relative;
	width: calc(100% - #{$margin * 2});

	#TonejsLogo {
		position: absolute;
		top: $margin;
	}

	#Examples {

		right: 10px;
		top: 0px;
		height: $topbarHeight;
		line-height: $topbarHeight;
		position: absolute; 
		width: 100px;
		text-align: left;

		a {
			position: absolute;
			font-size: $fontSize;
			color: white;
			text-transform: none;
			text-decoration: none;
		}
	}

	#Hamburger {

		$shrink : 0.8;

		display: none;
		width: $topbarHeight * $shrink;
		height: $topbarHeight * $shrink;
		position: absolute;
		right: 10px;
		top: ($topbarHeight * (1 - $shrink)) / 2;
		cursor: pointer;

		span {
			margin-top: 6px;
			position: absolute;
			width: 80%;
			height: $margin;
			left: 10%;
			background-color: white;
		}


		span:nth-child(0) {
			top: 25% * 0;
		}
		span:nth-child(1) {
			top: 25% * 1;
		}
		span:nth-child(2) {
			top: 25% * 2;
		}

		&:hover:active {
			span {
				background-color: $teal;
			}
		}
	}

}


#MobileStart {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 10000;
	top: 0px;
	left: 0px;
	background-color: rgba(0, 0, 0, 0.8); 

	$ButtonSize : 80px;
	
	#Button {
		position: absolute;
		left: 50%;
		top: 50%;
		background-color: $purple;
		color: white;
		border-radius: $margin;
		margin-top: -$ButtonSize/2;
		margin-left: -$ButtonSize/2;
		width: $ButtonSize;
		height: $ButtonSize;
		text-align: center;
		line-height: $ButtonSize; 
	}

	#Button:hover {
		background-color: $purple;
		color: white; 
	}

	#Button:hover:active {
		background-color: $pink;
		color: $teal; 
	}
}

.Mobile #Content {
	// width: calc(100% - 28px); 
}


#Content {
	width: 100%;
	margin-bottom: $padding; 

	#Title {
		height: 23px;
		line-height: 23px;
		font-size: 1.2em;
		color: white;
		width: calc(100% - #{$padding});
		padding-left: $padding;
		background-color: black; 
	}

	#Explanation {
		position: relative;
		padding: $padding;
		color: black;
		font-size: $fontSize;
		box-sizing: border-box;
		border: $margin solid black;
		border-top-width: 0px;
		width: 100%; 

		img {
			width: 80%;
			max-width: 700px;
			margin-left: auto;
			margin-right: auto;
			display: block; 
		}
	}

	a {
		color: black;
		font-size: $fontSize;
		font-weight: bold;
		text-decoration: none; 
	}
	a:hover {
		color: $green; 
	}
	a:hover:active {
		color: $pink; 
	}

	$DraggerHeight : 400px;


	// DRAGER
	#DragContainer {
		margin-left: $margin;
		margin-top: $margin;
		margin-bottom: $padding;
		width: calc(100% - #{$margin});
		height: $DraggerHeight;
		position: relative;
		color: white; 
	}
	//SLIDERS
	.Slider.x {
		position: relative;
		height: 94px;
		width: 100%;
		margin-top: 3px; 
		.Axis {
			top: 50%;
			margin-top: -1.5px; 
		}
	}
	.Slider.y {
		position: relative;
		width: 94px;
		height: $DraggerHeight; 
		.Axis {
			left: 50%;
			margin-left: -1.5px; 
		}
	}

	$DragHandleSize : 90px;

	//DRAGGER
	.Dragger {
		width: $DragHandleSize;
		height: $DragHandleSize;
		position: absolute;
		background-color: black;
		border-radius: 50%;
		z-index: 1;
		margin-top: -2px;
		border: 2px solid white;
		cursor: -webkit-grab; 

		#Name {
			width: 100%;
			height: 100%;
			position: relative;
			text-align: center;
			font-size: 12px;
			line-height: $DragHandleSize;
			color: white; 
		}
	}

	.Dragger:hover {
		background-color: $blue;
		color: white; 
	}

	.Dragger.is-pointer-down {
		cursor: -webkit-grabbing;
		background-color: $pink; 
		#Name {
			color: $green; 
		}
	}

	$AxisWidth : 3px;

	//AXIS LINES
	.Axis {
		position: absolute;
		background-color: black;
		width: $AxisWidth;
		height: $AxisWidth;
		top: $AxisWidth;
		left: $AxisWidth;
		border-radius: $AxisWidth/2;
		z-index: 0; 
	}

	#xAxis {
		width: calc(100% - #{$margin * 2}); 
	}
	#yAxis {
		height: calc(100% - #{$margin * 2}); 
	}

	$ButtonHeight : 90px;

	//BUTTONS
	.Button {
		width: 100%;
		margin-top: $margin;
		height: $ButtonHeight;
		background-color: black;
		line-height: $ButtonHeight;
		color: white;
		border-radius: 10px;
		text-align: center;
		cursor: pointer; 
	}
	.Button:hover {
		color: white;
		background-color: $blue; 
	}
	.Button:hover:active, #Content .Button:hover:active.Active {
		color: $teal;
		background-color: $pink; 
	}
	.Button.Toggle.Active {
		$ToggleBorder : 3px;
		box-sizing: border-box;
		border: $ToggleBorder solid black;
		line-height: $ButtonHeight - $ToggleBorder*2;
		color: black;
		background-color: white; 
	}

	//TRANSPORT

	$TransportHeight : $ButtonHeight / 3;

	.Transport {
		width: 100%;
		height: $TransportHeight;
		background-color: black;
		line-height: $TransportHeight;
		color: white;
		border-radius: 10px;
		margin-top: $margin;
		position: relative;

		$PositionWidth: 70px;

		#Position {
			width: $PositionWidth;
			left: 50%;
			margin-left: -$PositionWidth/2;
			text-align: left;
			height: 100%;
			position: absolute;
			color: white;
		}
	}

}


.Keyboard {
	height: 100px;
	width: 100%;
	position: relative;
}

code {
	background-color: #ECECEC;
	color: #333;
	padding: 1px; 
}


//LOADING

#Loading {
	z-index: 100000;
	position: absolute;
	background-color: rgba(140, 140, 140, 0.5);
	width: 100%;
	height: calc(100% - 37.5px);
	top: 37.5px;
	left: 0px;
	opacity: 1;
	transition: opacity 0.4s;
	#Text {
		color: white;
		position: absolute;
		text-align: center;
		top: 50%;
		left: 50%;
		width: 300px;
		margin-left: -150px;
		height: 60px;
		margin-top: -30px;
		line-height: 60px;
		font-size: 42px; 
	}
}

#Loading.Loaded {
	pointer-events: none;
	opacity: 0; 
}

tone-js-audio-file-playback-example.markdown

Tone.js Audio File Playback Example

Tone.js example ported over for learning.

https://tonejs.github.io/examples/#player

Thanks to tambien.

A Pen by Steven Cobb on CodePen.

License.