微信小程序实现一个音乐播放器的功能

这篇具有很好参考价值的文章主要介绍了微信小程序实现一个音乐播放器的功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

要求

1.页面包含一个音乐列表,点击列表中的音乐可以播放对应的音乐。
2.播放中的音乐在列表中有标识,并且可以暂停或继续播放。
3.显示当前音乐的播放进度和总时长,并可以拖动进度条调整播放进度。
4.点击切换按钮可以切换到下一首音乐。
5.点击循环按钮可以切换音乐的播放模式(单曲循环、列表循环、随机播放)。

代码实现

wxml 文件

<view class="container">
  <scroll-view scroll-y class="music-list">
    <view wx:for="{{ musicList }}" wx:key="{{ index }}" class="music-item" bindtap="onMusicTap" data-index="{{ index }}">
      <view class="music-name">{{ item.name }}</view>
      <view class="music-artist">{{ item.artist }}</view>
    </view>
  </scroll-view>
  <audio id="audio" src="{{ currentMusic.src }}" bindtimeupdate="onTimeUpdate" bindended="onEnded"></audio>
  <view class="player">
    <view class="controls">
      <button class="control-btn" bindtap="onPrev">上一首</button>
      <button class="control-btn" bindtap="onPlayOrPause">{{ playing ? '暂停' : '播放' }}</button>
      <button class="control-btn" bindtap="onNext">下一首</button>
      <button class="control-btn" bindtap="onChangeMode">模式</button>
    </view>
    <view class="progress">
      <text>{{ currentTime }}</text>
      <slider max="{{ duration }}" value="{{ currentPosition }}" bindchange="onSliderChange" />
      <text>{{ durationStr }}</text>
    </view>
  </view>
</view>

wxss 文件

.container {
  padding: 20rpx;
}

.music-list {
  height: 300rpx;
}

.music-item {
  padding: 10rpx;
  border-bottom: 1rpx solid #eee;
  text-align: left;
}

.player {
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.controls {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 10rpx;
}

.control-btn {
  background-color: #009688;
  color: #fff;
  padding: 10rpx 20rpx;
  border-radius: 4rpx;
}

progress {
  display: flex;
  align-items: center;
}

.slider {
  flex: 1;
  margin: 0 10rpx;
}

js文件

Page({
  data: {
    musicList: [
      { name: '歌曲1', artist: '歌手1', src: 'music1.mp3' },
      { name: '歌曲2', artist: '歌手2', src: 'music2.mp3' },
      // 更多音乐...
    ],
    currentMusic: {},
    playing: false,
    duration: 0,
    currentPosition: 0,
    currentTime: '00:00',
    durationStr: '00:00',
    playMode: 0, // 0: 列表循环,1: 单曲循环,2: 随机播放
  },

  onMusicTap(e) {
    const index = e.currentTarget.dataset.index;
    const music = this.data.musicList[index];
    this.setData({
      currentMusic: music,
      playing: true,
    });
    this.playMusic();
  },

  onPlayOrPause() {
    if (this.data.playing) {
      this.pauseMusic();
    } else {
      this.playMusic();
    }
  },

  playMusic() {
    const audio = this.selectComponent('#audio');
    audio.play();
    this.setData({
      playing: true,
    });
  },

  pauseMusic() {
    const audio = this.selectComponent('#audio');
    audio.pause();
    this.setData({
      playing: false,
    });
  },

  onPrev() {
    let currentIndex = this.data.musicList.findIndex(item => item.src === this.data.currentMusic.src);
    if (currentIndex === 0) {
      currentIndex = this.data.musicList.length - 1;
    } else {
      currentIndex--;
    }
    const music = this.data.musicList[currentIndex];
    this.setData({
      currentMusic: music,
      playing: true,
    });
    this.playMusic();
  },

  onNext() {
    let currentIndex = this.data.musicList.findIndex(item => item.src === this.data.currentMusic.src);
    if (currentIndex === this.data.musicList.length - 1) {
      currentIndex = 0;
    } else {
      currentIndex++;
    }
    const music = this.data.musicList[currentIndex];
    this.setData({
      currentMusic: music,
      playing: true,
    });
    this.playMusic();
  },

  onTimeUpdate(e) {
    const duration = e.detail.duration;
    const currentPosition = e.detail.currentTime;
    const currentTime = this.formatTime(currentPosition);
    const durationStr = this.formatTime(duration);
    this.setData({
      duration: duration,
      currentPosition: currentPosition,
      currentTime: currentTime,
      durationStr: durationStr,
    });
  },

  onEnded() {
    if (this.data.playMode === 1) {
      // 单曲循环
      const audio = this.selectComponent('#audio');
      audio.seek(0);
      audio.play();
    } else {
      this.onNext();
    }
  },

  onSliderChange(e) {
    const value = e.detail.value;
    const audio = this.selectComponent('#audio');
    audio.seek(value);
  },

  onChangeMode() {
    let playMode = this.data.playMode;
    playMode = (playMode + 1) % 3;
    this.setData({
      playMode: playMode,
    });
  },

  formatTime(time) {
    const minutes = Math.floor(time / 60);
    const seconds = Math.floor(time % 60);
    const minuteStr = minutes < 10 ? '0' + minutes : '' + minutes;
    const secondStr = seconds < 10 ? '0' + seconds : '' + seconds;
    return minuteStr + ':' + secondStr;
  },
});

解析

其中,onPrev() 和 onNext() 函数实现了切换到上一首和下一首音乐的逻辑。通过 findIndex()
函数找到当前音乐在列表中的位置,然后根据播放模式计算出下一首或上一首音乐的位置,更新当前音乐并播放。

onTimeUpdate() 函数实现了更新播放进度的逻辑,通过 detail 参数获取音频的总时长和当前播放进度,并格式化成 00:00
的形式,更新页面数据。

onEnded() 函数实现了音乐播放结束的逻辑,根据当前的播放模式决定是单曲循环还是切换到下一首音乐。

onSliderChange() 函数实现了调整播放进度的逻辑,通过 seek() 函数跳转到指定的时间点。

onChangeMode() 函数实现了切换播放模式的逻辑,通过取余操作循环切换三种播放模式。

到这里也就结束了,希望对您有所帮助。文章来源地址https://www.toymoban.com/news/detail-814720.html

到了这里,关于微信小程序实现一个音乐播放器的功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 案例115:基于微信小程序的音乐播放器的设计与实现

    文末获取源码 开发语言:Java 框架:SSM JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序运行软件:微信开发者 目录 目录 前言 系统展示 系统首页界面的设计实现 用户注册功能的设计实现 用户登

    2024年02月02日
    浏览(43)
  • 基于微信小程序音乐播放器的设计与实现毕业设计源码271156

    Springboot音乐播放小程序的设计与实现 摘 要 本文设计了一种基于微信小程序的音乐播放器,系统为人们提供了方便快捷、即用即搜的音乐搜索播放服务,包括音乐资讯、音乐库推荐、交流论坛、注册登录、最近播放列表功能等,用户不仅能够方便快捷地查看资讯、还能搜索

    2023年04月24日
    浏览(50)
  • 微信小程序--音乐播放器

    说明: 这个项目旨在练习组件以及页面的设计。页面和交互的实现可能有多种方式,这里只为了对组件和项目的结构进行熟悉了解。后续会有更加完善的项目。 由于涉及到mp3外链导入音乐,预览二维码在外链失效时会出错,这里不放预览二维码了;另预览二维码存在有效时

    2024年02月09日
    浏览(45)
  • 微信小程序音乐播放器实践

    1.成品展示: 实现搜索音乐,同步歌词,控制播放等功能 2.设计: 采用微信开发文档中的audio组件的作为代码原型,进行扩展,链接audio | 微信开放文档 (qq.com) 3、具体设计 思维导图 链接:https://pan.baidu.com/s/1whZC2xOP4HvbDMjMPA7pRQ  提取码:ljsb 3.1 播放界面index 3.2 索引界面list

    2024年02月11日
    浏览(42)
  • 微信小程序——【云音乐播放器】

    目录 第一章 开发准备 一、项目结构 二、新建微信小程序项目 第二章 标签页切换 一、常用组件介绍 二、编写页面结构和样式 第三章 音乐推荐 一、组件介绍 二、编写音乐推荐页面结构和样式 第四章 播放器 一、任务分析 二、组件介绍 三、实现播放器功能 四、编写播放器

    2024年02月09日
    浏览(44)
  • 《微信小程序》音乐播放器项目

    需求:在装有node.js的机器上使用微信开发者工具开发一个音乐播放项目 写这个项目的时候电脑前后蓝屏了5次,制作不易,希望大佬们给个双击,顺子在这感谢啦! 展示: pages–index–index.js 01.png 02.png 02stop.png 03.png 04.png 05.png 06.png banner.jpg banner2.jpg banner3.jpg cover.jpg cover1.png

    2024年02月11日
    浏览(51)
  • 音乐播放器微信小程序

    一:学习目标: 掌握swiper组件、scroll-view组件的使用; 掌握image组件的使用; 掌握slider组件的使用; 掌握音频API的使用;  二:目录: 1. 开发前的准备 1.1 音乐小程序 项目展示 : 1.1.1: 音乐推荐 界面展示: 1.1.2: 播放器 界面展示: 1.1.3: 播放列表 界面展示: 1.2: 项目

    2024年02月05日
    浏览(72)
  • 基于微信小程序的音乐播放器设计与实现(源码+lw+部署文档+讲解等)

    💗 博主介绍 :✌全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌💗 👇🏻 精彩专栏 推荐订阅 👇🏻 2023-2024年最值得选的微信小程序毕业设

    2024年02月03日
    浏览(35)
  • 微信小程序音乐播放器【含源码】

    微信小程序音乐播放器 取源码私聊

    2024年02月06日
    浏览(37)
  • 微信小程序仿网易音乐播放器项目

    主页样式 播放页样式 搜索页样式 排行榜页样式 小控件样式 网易云音乐API接口 后端接口,使用node写的,使用了网易云音乐API: 封装的api文件 主页面功能点 banner,滑动菜单栏采用微信的API( swiper 与 scroll-view )进行开发 滑动到底部重新获取后续的歌曲,使用onReachBottom周期

    2024年02月06日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包