Add all the objects to the PlaybackContainer

osu.Game/Screens/Edit/Components/BottomBarContainer.cs

@@ -2,9 +2,11 @@
 // Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
 
 using osu.Framework.Allocation;
+using osu.Framework.Configuration;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
+using osu.Game.Beatmaps;
 using osu.Game.Graphics;
 
 namespace osu.Game.Screens.Edit.Components
@@ -14,6 +16,8 @@ namespace osu.Game.Screens.Edit.Components
         private const float corner_radius = 5;
         private const float contents_padding = 15;
 
+        public Bindable<WorkingBeatmap> Beatmap = new Bindable<WorkingBeatmap>();
+
         private readonly Drawable background;
         private readonly Container content;
 

osu.Game/Screens/Edit/Components/PlaybackContainer.cs

@@ -1,9 +1,170 @@
 // Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
 // Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
 
+using OpenTK;
+using osu.Framework.Allocation;
+using osu.Framework.Audio.Track;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.UserInterface;
+using osu.Framework.Input;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Graphics.UserInterface;
+
 namespace osu.Game.Screens.Edit.Components
 {
     public class PlaybackContainer : BottomBarContainer
     {
+        private readonly IconButton playButton;
+
+        private bool lastTrackState;
+        private Track track => Beatmap.Value.Track;
+
+        public PlaybackContainer()
+        {
+            PlaybackTabControl tabs;
+
+            Children = new Drawable[]
+            {
+                playButton = new IconButton
+                {
+                    Anchor = Anchor.CentreLeft,
+                    Origin = Anchor.Centre,
+                    Scale = new Vector2(1.4f),
+                    IconScale = new Vector2(1.4f),
+                    Icon = FontAwesome.fa_play_circle_o,
+                    Action = play,
+                    Padding = new MarginPadding { Left = 20 }
+                },
+                new OsuSpriteText
+                {
+                    Origin = Anchor.BottomLeft,
+                    Text = "Playback Speed",
+                    RelativePositionAxes = Axes.Y,
+                    Y = 0.5f,
+                    Padding = new MarginPadding { Left = 45 }
+                },
+                new Container
+                {
+                    Anchor = Anchor.BottomLeft,
+                    Origin = Anchor.BottomLeft,
+                    RelativeSizeAxes = Axes.Both,
+                    Height = 0.5f,
+                    Padding = new MarginPadding { Left = 45 },
+                    Child = tabs = new PlaybackTabControl(),
+                }
+            };
+
+            tabs.AddItem(0.25);
+            tabs.AddItem(0.75);
+            tabs.AddItem(1);
+
+            tabs.Current.ValueChanged += newValue => track.Tempo.Value = newValue;
+        }
+
+        private void play()
+        {
+            if (track.IsRunning)
+                track.Stop();
+            else
+                track.Start();
+        }
+
+        protected override void Update()
+        {
+            base.Update();
+
+            var currentTrackState = track.IsRunning;
+            if (currentTrackState == lastTrackState)
+                return;
+
+            playButton.Icon = currentTrackState ? FontAwesome.fa_pause_circle_o : FontAwesome.fa_play_circle_o;
+
+            lastTrackState = currentTrackState;
+        }
+
+        private class PlaybackTabControl : OsuTabControl<double>
+        {
+            protected override TabItem<double> CreateTabItem(double value) => new PlaybackTabItem(value);
+
+            protected override Dropdown<double> CreateDropdown() => null;
+
+            public PlaybackTabControl()
+            {
+                RelativeSizeAxes = Axes.Both;
+                TabContainer.Spacing = new Vector2(20, 0);
+            }
+
+            public class PlaybackTabItem : TabItem<double>
+            {
+                private const float fade_duration = 100;
+
+                private readonly OsuSpriteText text;
+                private readonly OsuSpriteText textBold;
+
+                public PlaybackTabItem(double value) : base(value)
+                {
+                    AutoSizeAxes = Axes.X;
+                    RelativeSizeAxes = Axes.Y;
+
+                    Children = new Drawable[]
+                    {
+                        text = new OsuSpriteText
+                        {
+                            Origin = Anchor.TopCentre,
+                            Anchor = Anchor.TopCentre,
+                            Text = $"{value:P0}",
+                            TextSize = 14,
+                        },
+                        textBold = new OsuSpriteText
+                        {
+                            Origin = Anchor.TopCentre,
+                            Anchor = Anchor.TopCentre,
+                            Text = $"{value:P0}",
+                            TextSize = 14,
+                            Font = @"Exo2.0-Bold",
+                            Alpha = 0,
+                            AlwaysPresent = true,
+                        },
+                    };
+                }
+
+                [BackgroundDependencyLoader]
+                private void load(OsuColour colours)
+                {
+                    text.Colour = colours.Gray5;
+                }
+
+                protected override bool OnHover(InputState state)
+                {
+                    if (!Active)
+                        toBold();
+                    return true;
+                }
+
+                protected override void OnHoverLost(InputState state)
+                {
+                    if (!Active)
+                        toNormal();
+                }
+
+                private void toBold()
+                {
+                    text.FadeOut(fade_duration);
+                    textBold.FadeIn(fade_duration);
+                }
+
+                private void toNormal()
+                {
+                    text.FadeIn(fade_duration);
+                    textBold.FadeOut(fade_duration);
+                }
+
+                protected override void OnActivated() => toBold();
+
+                protected override void OnDeactivated() => toNormal();
+            }
+        }
     }
 }

osu.Game/Screens/Edit/Components/Timelines/Summary/SummaryTimeline.cs

@@ -3,11 +3,9 @@
 
 using OpenTK;
 using osu.Framework.Allocation;
-using osu.Framework.Configuration;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
-using osu.Game.Beatmaps;
 using osu.Game.Graphics;
 using osu.Game.Screens.Edit.Components.Timelines.Summary.Parts;
 
@@ -18,8 +16,6 @@ namespace osu.Game.Screens.Edit.Components.Timelines.Summary
     /// </summary>
     public class SummaryTimeline : BottomBarContainer
     {
-        public Bindable<WorkingBeatmap> Beatmap = new Bindable<WorkingBeatmap>();
-
         private readonly Drawable timelineBar;
 
         public SummaryTimeline()

osu.Game/Screens/Edit/Editor.cs

@@ -117,7 +117,9 @@ namespace osu.Game.Screens.Edit
                 },
             };
 
+            timeInfo.Beatmap.BindTo(Beatmap);
             timeline.Beatmap.BindTo(Beatmap);
+            playback.Beatmap.BindTo(Beatmap);
             menuBar.Mode.ValueChanged += onModeChanged;
         }