# 10.3 音乐播放器（Music player）

<template>
  <div class="demo">
    <dof-minibar
      :left-button="leftButton"
      title="音乐播放器"
      text-color="#ffffff"
      background-color="rgba(38,122,255,1)"
      @dofMinibarLeftButtonClicked="back"
    ></dof-minibar>
    <div class="content-container">
      <dof-music-player
        :volume="30"
        :min="0"
        :max="100"
        :play="playFlag"
        :title="'早间新闻'"
        @dofVolumeChanged="dofVolumeChanged"
        @dofPlayClicked="dofPlayClicked"
        @dofNextClicked="dofNextClicked"
      ></dof-music-player>
      <div class="h-10"></div>
      <dof-music-player
        :volume="50"
        :min="0"
        :max="100"
        :play="!playFlag"
        :title="'早间新闻到底是怎么'"
        @dofVolumeChanged="dofVolumeChanged"
        @dofPlayClicked="dofPlayClicked"
        @dofNextClicked="dofNextClicked"
      ></dof-music-player>
      <div class="h-10"></div>
      <dof-music-player
        :volume="80"
        :min="0"
        :max="100"
        :play="playFlag"
        :title="'早间新闻到底是怎么进行一场场播报的'"
        @dofVolumeChanged="dofVolumeChanged"
        @dofPlayClicked="dofPlayClicked"
        @dofNextClicked="dofNextClicked"
      ></dof-music-player>
    </div>
  </div>
</template>

<script>
import { DofMinibar, DofMusicPlayer } from 'dolphin-weex-ui'
const modal = weex.requireModule('modal')
export default {
  components: {
    DofMinibar,
    DofMusicPlayer
  },
  data: () => ({
    leftButton: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/header/icon_back_white@3x.png',
    playFlag: true
  }),
  created() {},
  mounted() {},
  computed: {},
  methods: {
    dofVolumeChanged(val) {
      modal.toast({
        message: val
      })
    },
    dofPlayClicked(type) {
      modal.toast({
        message: type
      })
    },
    dofNextClicked() {
      modal.toast({
        message: 'Next Clicked'
      })
    }
  }
}
</script>

<style scoped>
.demo {
  background-color: #f9f9f9;
}
.content-container {
  padding: 32px;
}

.h-10 {
  width: 100%;
  height: 20px;
}
</style>