Hbuilder制作音乐播放器播放栏

要制作音乐播放器的播放栏，可以使用Hbuilder的mui框架进行开发。具体步骤如下：

1. 在html文件中添加一个div，用来放置播放栏的各个组件，例如播放按钮、歌曲名称、歌曲进度条等。

<div class="player-bar">
  <span class="song-name">歌曲名称</span>
  <div class="play-progress">
    <div class="progress-bar"></div>
  </div>
  <div class="play-control">
    <span class="play-btn"></span>
    <span class="volume-btn"></span>
  </div>
</div>

2. 使用mui的样式来美化播放栏，例如设置背景颜色、字体样式等。

.player-bar {
  background-color: #f5f5f5;
  padding: 10px;
  display: flex;
  align-items: center;
}

.player-bar .song-name {
  margin-right: 10px;
  font-size: 18px;
}

.play-progress {
  flex-grow: 1;
  height: 4px;
  background-color: #e5e5e5;
  margin: 0 10px;
}

.progress-bar {
  height: 100%;
  background-color: #488aff;
  width: 0;
}

.play-control {
  display: flex;
  align-items: center;
}

.play-control .play-btn {
  width: 30px;
  height: 30px;
  background-image: url(images/play.png);
  background-size: cover;
  margin-right: 10px;
}

.play-control .volume-btn {
  width: 30px;
  height: 30px;
  background-image: url(images/volume.png);
  background-size: cover;
}

3. 使用JavaScript来实现播放栏的各个功能，例如点击播放按钮可以开始或暂停歌曲的播放，拖动进度条可以改变歌曲的播放进度等。

var audio = document.createElement('audio');
var progressBar = document.querySelector('.progress-bar');
var playBtn = document.querySelector('.play-btn');

// 播放/暂停歌曲
playBtn.addEventListener('click', function() {
  if (audio.paused) {
    audio.play();
    playBtn.style.backgroundImage = 'url(images/pause.png)';
  } else {
    audio.pause();
    playBtn.style.backgroundImage = 'url(images/play.png)';
  }
});

// 拖动进度条改变歌曲播放进度
progressBar.addEventListener('touchstart', function(e) {
  var touch = e.touches[0];
  var progress = (touch.pageX - progressBar.offsetLeft) / progressBar.offsetWidth;
  audio.currentTime = audio.duration * progress;
});

audio.addEventListener('timeupdate', function() {
  var progress = audio.currentTime / audio.duration;
  progressBar.style.width = progress * 100 + '%';
});

audio.addEventListener('ended', function() {
  playBtn.style.backgroundImage = 'url(images/play.png)';
  progressBar.style.width = '0';
});

4. 在JavaScript中使用HTML5的Audio对象来实现歌曲的播放，例如设置歌曲的路径、播放状态等。

audio.src = 'song.mp3';
audio.autoplay = false;
audio.preload = 'metadata';

5. 可以通过调用第三方的音乐API来获取歌曲的信息，例如歌曲名称、歌手等。

fetch('http://api.music.com/song/123')
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    document.querySelector('.song-name').textContent = data.name;
  });

6. 最后，将播放栏与歌曲列表等其他组件进行整合，完成音乐播放器的开发。

以上是制作音乐播放器的播放栏的大致步骤，具体的实现细节可以根据需求进行调整。