JSFiddle - React, Tailwind, and code Playground

by kangismet

HTML

<div id="app">
  <div>
    <button @click="selected = 'https://iplanning.heteml.net/intern/music-player/bgm01.mp3'">BGM01</button>
    <button @click="selected = 'https://iplanning.heteml.net/intern/music-player/bgm02.mp3'">BGM02</button>
    <button @click="selected = 'https://iplanning.heteml.net/intern/music-player/bgm03.mp3'">BGM03</button>
  </div>
  <div>
    <audio :src="selected" controls autoplay />
  </div>
</div>

CSS

#app {
  text-align: center;
  padding: 2rem;
  margin: 0 auto;
  border: 10px solid #333;
  border-radius: 1em;
  width: 20rem;
}
button {
  padding: 1rem;
  margin: 0.5rem;
}

JavaScript

Vue.config.devtools = true;

new Vue({
  el: "#app",
  data: {
    selected: ""
  }
});