Vue.js Tutorial to Play MP3 Sound or Music Files From URL inside Browser Using Bootstrap 4 and Animate.css in Javascript Full Project For Beginners

  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<div class="heading">
  <h1>Play Sound</h1>
  <h4>Playing audio files with Vue.js</h4>
</div>

<div class="container" id="app">
  
  <div class="form-group">
    <label>
      <button class="btn btn-primary btn-sm" @click.prevent="playSound('http://soundbible.com/mp3/Air Plane Ding-SoundBible.com-496729130.mp3')"><span class="fa fa-play-circle-o"></span></button>
      Play Air Plane Ding
    </label>
    <br>
    <label>
      <button class="btn btn-primary btn-sm" @click.prevent="playSound('http://soundbible.com/mp3/Elevator Ding-SoundBible.com-685385892.mp3')"><span class="fa fa-play-circle-o"></span></button>
      Play Elevator Ding
    </label>
  </div>
  
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>

 

 

body {
     background-color: #5c4084;
     padding: 50px;
}
 .container {
     padding: 40px 80px 15px 80px;
     background-color: #fff;
     border-radius: 8px;
     max-width: 400px;
}
 .heading {
     text-align: center;
}
 .heading h1 {
     background: -webkit-linear-gradient(#fff, #999);
     -webkit-text-fill-color: transparent;
     -webkit-background-clip: text;
     text-align: center;
     margin: 0 0 5px 0;
     font-weight: 900;
     font-size: 4rem;
     color: #fff;
}
 .heading h4 {
     color: #a990cc;
     text-align: center;
     margin: 0 0 35px 0;
     font-weight: 400;
     font-size: 24px;
}
 .btn {
     outline: none !important;
}
 .btn.btn-primary {
     background-color: #5c4084;
     border-color: #5c4084;
     outline: none;
}
 .btn.btn-primary:hover {
     background-color: #442f62;
     border-color: #442f62;
}
 .btn.btn-primary:active, .btn.btn-primary:focus {
     background-color: #684895;
     border-color: #684895;
}
 .btn.btn-primary .fa {
     padding-right: 4px;
}
 .btn-sm {
     font-size: 22px;
     padding: 2px 1px 2px 4px;
     line-height: 12px;
     margin-right: 10px;
}
 .form-group {
     margin-bottom: 25px;
}

 

See also  Build Anonymous Random P2P WebRTC Zoom Clone Video Chat in Mobile Using Node.js Socket.io & Vue.js in Javascript Full Project For Beginners

 

new Vue({
  el: '#app',
  data: {
    text: ''
  },
  methods: {
    playSound (sound) {
      if(sound) {
        var audio = new Audio(sound);
        audio.play();
      }
    }
  }
});

Leave a Reply