音乐播放器

最新推荐文章于 2024-08-06 10:22:43 发布
最新推荐文章于 2024-08-06 10:22:43 发布
阅读量194 收藏
点赞数
文章标签： java 服务器 servlet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56731094/article/details/128341370
版权

第一页

<view class="tab">

  <view class="tab-item {{item==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐</view>

  <view class="tab-item {{item==1?'active':''}}" bindtap="changeItem" data-item="1">播放器</view>

  <view class="tab-item {{item==2?'active':''}}" bindtap="changeItem" data-item="2">播放列表</view>

</view>

<view class="content" style="color: #ffff;">

  <swiper>

    <swiper-item>

      <include src="./info"></include>

    </swiper-item>

    <swiper-item>

      <include src="./play"></include>

    </swiper-item>

    <swiper-item>

      <include src="./playlist"></include>

    </swiper-item>

  </swiper>

</view>

<view class="player">

    <image src="../images/cover.jpg"></image> 

    <view clas="player-info">

      <view >钢琴协调曲</view>

      <view class="player-info-auth">肖邦</view>

    </view>

    <view class="player-controls">

    <image src="../images/01.png" bindtap="changeList"></image>

    <image wx:if="{{ state=='paused' }}"src="../images/02.png"></image>

    <image wx:if="{{state=='running'}}"src="../images/03.png"></image>

    <image src="../images/03.png"></image>

    </view>

</view>

javascript函数内容

Page({

  /**

   * 页面的初始数据

   */

  data: {

    playIndex: true,

      item:0,

      state:'paused',

      playlist:[{

        id:1,

        title:'钢琴协调曲1',

        singer:'肖邦1',

        coverImage:'../images/cover.jpg',

        src:'https://www.ytmp3.cn/down/78485.mp3'

      },{

        id:2,

        title:'钢琴协调曲2',

        singer:'肖邦2',

        coverImage:'../images/cover.jpg',

        src:'https://www.ytmp3.cn/down/78485.mp3'

      },{

        id:3,

        title:'钢琴协调曲3',

        singer:'肖邦3',

        coverImage:'../images/cover.jpg',

        src:'https://www.ytmp3.cn/down/78485.mp3'

      },{

        id:4,

        title:'钢琴协调曲4',

        singer:'肖邦4',

        coverImage:'../images/cover.jpg',

        src:'http://www.ytmp3.cn/down/78484.mp3'

      }

    ],

    play:{

      id:0,

      title:'test',

      singer:'stest',

      coverImage:'../images/cover.jpg',

      src:''

    }

  },

  changeItem:function(e){

    console.log(e)

    this.setData({

      playIndex:e.currentTarget.dataset.index,

    })

    //缺少切换歌曲的逻辑，后面补充

    this.setMusic(e.currentTarget.dataset.index)

  },

  change:function(e){

    console.log(e)

    this.setData({

      playIndex:e.currentTarget.dataset.index,

    })

    this.setMusic(e.currentTarget.dataset.index)

    if(this.data.state=='running'){

      this.play()

    }

  },

  changeItem:function(e){

    //console.log(e)

    this.setData({

      item:e.detail.current

    })

  },

  play:function(e){

    //播放音乐，放到后面实现

    this.audioCtx.play()

    //改变状态

    this.setData({

      state:'runing'

    });

  },

  pause:function(e){

    //暂停播放音乐，放到后面实现

    this.audioCtx.pause()

    //改变状态

     this.setData({

       state:'paused'

     });

  },

  changeList:function(e){

    this.setData({

      item:2

    })

  },

  next:function(e){

    var index = this.data.playIndex+1;

    var count = this.data.playlist.length;

    index = index%count;

    this.setMusic(index)

    if(this.data.state == 'running'){

      this.play()

    }

  },

  testbindchange:function(e){

  },

  testbindchanging:function(e){

  },

  

  

  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady() {

  },

  /**

   * 生命周期函数--监听页面显示

   */

  onShow() {

  },

  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide() {

  },

  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload() {

  },

  /**

   * 

   */

  audioCtx :null,

  onReady() {

    this.audioCtx  =wx.createInnerAudioContext()

    //默认播放第0首歌曲

    this.setMusic(0)

  },

  //播放第index首歌曲

模块框架

  setMusic:function(index){

      var currentMusic = this.data.playlist[index]

      this.audioCtx.src = currentMusic.src

      //保存当前播放音乐的信息

      this.setData({

          'play.title':currentMusic.title,

          'play.singer':currentMusic.singer,

          'play.coverImage':currentMusic.coverImage,

          'play.src':currentMusic.src,

          'play.id':currentMusic.id

      })

  },



 

  onPullDownRefresh() {

  },

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom() {

  },

  /**

   * 用户点击右上角分享

   */

  onShareAppMessage() {

  }

})

page{

  background-color: #1a1818;

  height: 100%;

  display: flex;

  flex-direction: column;

}

.tab{

  display: flex;

  flex-direction: row;

}

.tab-item{

  flex: 1;

  text-align: center;

  color: #ffffff;

  font-size: 10pt;

  line-height: 72rpx;

  border-bottom: 6rpx solid #ffffff;

}

.tab-item.active{

  color: #ff1e1e;

  border-bottom: 6rpx solid #ff1e1e;

}

.content{

  height: 100%;

}

.content>swiper{

  height: 100%;

}

.content-info-portal{

  display: flex;

  margin-bottom: 15px;

}

.content-info-portal image{

  width: 120rpx;

  height:120rpx;

  display: block;

  margin: 20rpx auto;

}

.content-info-portal>view{

  flex: 1;

  font-size: 11pt;

  text-align: center;

}

.content-info-list>text{

  margin-left: 10rpx;

}

.list-inner{

  display: flex;

  flex-direction: row;

}

.list-item{

  flex: 1;

  text-align: center;

}

.list-item>image{

  width: 200rpx;

  height: 200rpx;

  display: block;

  margin: 0 auto;

  border-radius: 10rpx;

}

.content-info-list {

  font-size: 11pt;

  margin-bottom: 20rpx;

}

.content-info-list>list-title{

  margin: 20rpx 35rpx;

}

.content-info-list>.list-inner{

  display: flex;

  flex-wrap: wrap;

  margin: 15rpx;

}

.content-info-list>.list-inner>.list-item{

  flex: 1;

}

.content-info-list>.list-inner>.list-item>image{

  display: block;

  width: 200rpx;

  height: 200rpx;

  margin: 0 auto;

  border-radius: 10rpx;

  border: 1rpx solid #555;

}

.content-info-list>.list-inner>.list-item>view{

  width: 200rpx;

  margin: 10rpx auto;

  font-size: 10pt;

}

/*播放控制器的样式*/

.player{

  display: flex;

  flex-direction: row;

  height: 112rpx;

  background: rgb(14,13,13);

  color:  #ffffff;

  border-top: 1px solid #726b6b;

}

.player>image{

  width: 80rpx;

  height: 80rpx;

  border-radius: 10rpx;

  border: 1px solid #a89999;

  margin-left: 20rpx;

  margin-top: 10rpx;

}

.player-info{

  margin-top: 10rpx;

  flex: 1;

  font-size: 8pt;

  margin-left: 20rpx;

}

.player-info-auth{

  color: rgb(185,172,163);

}

.player-controls{

  margin: 0 auto;

}

.player-controls>image{

  width: 80rpx;

  height: 80rpx;

  margin-right: 20rpx;

}

.content-play{

  display: flex;

  flex-direction: column;

  height: 100%;

  justify-content: space-around;

  text-align: center;

}

.content-play-cover{

  height: 550px;

  text-align: center;

}

.content-play-info > view{

  color:#b9b4b4;

  font-size: 11pt;

}

.content-play-cover>image{

  height: 400rpx;

  width: 400rpx;

  border-radius: 50%;

  border: 1px solid #726b6b;

  animation-name: rotateImage; 

  animation-duration:10s;

  animation-timing-function: linear;

  animation-iteration-count: infinite;

}

.content-play-progress{

 color:#ffffff;

  font-size: 9pt;

  display: flex;

  margin:0 35rpx;

  align-items: center;

}

.content-play-progress slider{

  flex:1;

}

@keyframes rotateImage{

  from{

    transform: rotate(0deg);

  }

  to{

    transform: rotate(360deg);

  }

}

.playlist-list{

  display: flex;

  flex-direction: column;

  border-bottom:1px solid #d1caca;

}

.playlist-item{

  display: flex;

  flex-direction: row;

  height: 112rpx;

  align-items: center;

}

.playlist-item>image{

  width: 80rpx;

  height: 80rpx;

  border-radius: 8rpx;

  border: 1px solid #726b6b;

  margin-left: 15rpx;

}

.playlist-info{

  flex: 1;

  display: flex;

  flex-direction: column;

  font-size: 10pt;

  margin-left: 20rpx;

}

.playlist-info-author{

  color: #a89999;

}

playlist-info-contro{

  font-size: 10pt;

  color: #ff1e1e;

  margin-right: 20rpx;

}

第二页

<view class="content-play">

  <!--显示音乐信息-->

  <view class="content-play-info">

  <text>钢琴协调曲</text>

  <view>---肖邦---</view>

</view>

<!--显示唱片的图片-->

<view class="content-play-cover">

  <image src="../images/cover.jpg" style="animation-play-state:{{state}};"></image>

</view>

<!--显示播放的进度的区域-->

<view class="content-play-progress">

  <text>00:00</text>

  <slider value="40" activeColor="#909090" backgroundColor="#ffffff" block-size="12" block-color="#efefef" bindchange="testbindchange" bindchanging="testbindchangeing"></slider>

  <text>00:00</text>

</view>

</view>

第三页

<label wx:for="{{playlist}}">

<view class="playlist-list">

    <view class="playlist-item" bindtap="change" id="{{item.id}}" data-index="{{index}}">

        <image src="{{item.coverImage}}"></image>

        <view class="playlist-info">

            <text>{{item.singer}}</text>

            <text class="playlist-info-author">{{item.singer}}</text>

        </view>

        <view wx:if="{{index==playIndex}}" class="playlist-info-control">正在播放</view>

    </view>

</view>

</label>  

冯甘霖744
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android开发音乐播放器
06-09
Android音乐播放器实战，实现本地歌曲播放控制，可后台播放，拔出耳机暂停，来电暂停，电话挂断继续播放。这个项目很好的结合了Android的四大组件知识。其中音乐来源于手机本地，使用了Content Provider获取，播放...
微信小程序开发之——音乐播放器-播放器(3.4)
我的博客
12-01 1万+
一 概述 常用组件及API介绍 播放器页面任务 播放器页面任务 数据准备 音乐播放功能 播放器页面 二 常用组件及API介绍 2.1 音频API 介绍 微信小程序提供了播放音频的API，掌握这个API的使用方法是实现音乐播放的关键。 在使用音频API时，需要通过如下代码创建一个InnerAudioContext实例，audioCtx就是一个InnerAudioContext实例，也就是一个对象，利用这个对象的属性和方法可以完成具体的工作 var audioCtx=wx.createInnerA
微信公众号开发整理（四）--音乐消息回复
qq_38723394的博客
02-25 3461
1.首先，我们先看回复音乐消息数据格式：2.与回复图片消息一样，首先我们需要先创建音乐消息的实体类public class Music { private String Title; private String Description; private String MusicUrl; private String HQMusicUrl;//高质量的链接 private String Thumb...
微信小程序开发———音乐播放器
热门推荐
qq_50582468的博客
10-27 3万+
目录 一 小程序主体功能介绍 二 常用组件和API介绍 音频API 常用组件 三 整体布局 数据定义 主体页面 运行效果 四 播放器页面 布局部分 样式部分 运行效果 五 播放列表页面 布局部分 样式部分 运行效果 全部功能实现代码index.js 一 小程序主体功能介绍 本小程序主要实现，音乐的播放、暂停，下一曲的切换，以及播放列表和当前播放歌曲的详细信息查看等。 二 常用组件和API介绍 音频API 介绍 创建音频时需要先创建一个对象实例，从而引用该
音乐小程序项目
m0_67806453的博客
12-14 1177
音乐播放列表和音乐状态数据：pages/index/index.jsid: 1, title: '钢琴协奏曲', singer: '肖邦',}…}],play: {…},
微信小程序练手项目-音乐播放器
warneraop的博客
11-08 5283
微信小程序练手项目-音乐播放器 该项目只适合练手，大佬请绕道 项目展示图： 项目介绍 微信小程序音乐播放器 页面： 音乐推荐、播放器、播放列表 功能： 播放、暂停、上一首、下一首、跳转播放列表、实时进度条 未实现功能： 实时歌词、私人FM、每日歌曲推荐、云音乐新歌榜 歌曲文件和图片由本地服务器存储 项目链接 gitee码云链接 项目详解 启动服务端 打开服务器文件夹 在文件夹下打开Git Bash Here 输入 node index.js 需先安装NodeJs和Git，自行百度下载安装
音乐播放器源码
04-22
音乐播放器源码是开发Android应用的一个重要实例，它涵盖了多媒体处理、用户界面设计、数据管理等多个关键领域。在此，我们将深入探讨这个源码中涉及的主要知识点。 首先，"音乐播放器"涉及到的核心功能是音频播放...
微信小程序使用我们的本地服务器编写我们的音乐播放器
qq_45973003的博客
06-28 2074
第一步的话就是要有一个我们的本地服务器：同时的话我们还要安装我们的nodejs 我们的小程序服务端和提取码： 链接：https://pan.baidu.com/s/1KWWwNLcyMGkuw6Vk0qG_kQ 提取码：wumm 复制这段内容后打开百度网盘手机App，操作更方便哦 然后的话就是我们的页面代码的编写了： 页面效果的展示： 我们的tab页面列表的切换的话可以看我们的上一篇博客： 好的接下来的话就是我们的文件列表的展示： 接下来就是上我们的代码了： <!-- 在我们的这个位置的话就是
小程序--全局变量（播放音乐）
lsy__lsy的博客
05-24 3261
1、app.jsApp({ globalData: { g_isPlayingMusic: false, g_currentMusicPostId: null }})2、post-detail.jsvar app=getApp(); var globalData = app.globalData;//获取
微信小程序——音乐播放器
weixin_44037272的博客
04-03 5566
微信小程序音乐播放器 使用swiper组件完成三个标签页的切换，并且实现轮播图。scroll-view组件完成滚动视图，使用微信小程序提供的音乐API播放音频。
J031_使用TCP协议支持与多个客户端同时通信
lzn20161229的博客
08-03 422
使用TCP协议支持与多个客户端同时通信。
C++ - 函数重载
最新发布
jiaowenjie的专栏
08-06 180
/打印的是第二个函数的地址。//打印的是第一个函数的地址。-> 重载函数在本质上是相互独立的不同函数。-> 函数返回值不能作为函数重载的依据。-> 重载函数的函数类型不同。**3.函数默认参数和函数重载****函数重载的注意事项：****4.函数重载的本质**
枚举工具类
qq_43049583的博客
08-04 407
java枚举工具类
SpringBoot+Vue图书(图书借阅)管理系统-附项目源码与配套文档
m0_74283290的博客
08-03 1253
本论文阐述了一套先进的图书管理系统的设计与实现，该系统采用Java语言，结合现代Web开发框架和技术，旨在为图书馆提供高效、灵活且用户友好的资源管理解决方案。系统利用Spring Boot框架为核心，整合MyBatis ORM工具，以及MySQL数据库，构建了一个高性能、可扩展的后端服务。前端界面则采用了Vue.js框架，以提供流畅的用户交互体验。论文首先进行了详尽的需求分析，确定了系统的核心功能，包括图书的添加、编辑、删除、查询，读者的注册、登录、个人信息管理，以及图书的借阅、归还、续借流程。
等待唤醒机制两种实现方法-阻塞队列
泰勒今天想展开的博客
08-04 494
桌子上有面条-》吃货执行桌子上没面条-》生产者制造执行。
深入理解Java注解
weixin_55745942的博客
08-01 726
Java注解是用来描述程序元素（如类、方法、变量等）的一种机制。它们可以提供关于程序的补充信息，帮助编译器、框架或其他工具更好地理解和处理代码。注解通常以符号开头，后跟注解名称和可能的参数。要创建自定义注解，需要使用@interface关键字定义一个接口，并在接口中声明注解的属性。这个注解名为，可以被用来标记方法。它有一个名为value的属性，具有默认值"default"。
社区养老服务小程序的设计
Karen198的博客
07-31 755
管理员账户功能包括：系统首页，个人中心，用户管理，服务人员管理，服务产品管理，服务预约管理，服务状态管理，服务退订管理，活动管理，视频管理。主要技术：Java,Spring,mybatis,mysql,jquery,html。服务器：SpringBoot自带 apache tomcat。微信端账号功能包括：系统首页，服务产品，活动，视频，我的。JDK版本：Java JDK1.8。数据库可视化工具： navicat。数据库版本： mysql5.7。开发工具：IDEA(推荐)开发系统：Windows。
MFC音乐播放器制作教程
"这篇教程将指导你如何使用MFC（Microsoft Foundation Classes）创建一个简单的音乐播放器。通过这个过程，你将学习到如何构建用户界面、处理控件事件以及集成图像资源。" 在这个教程中，我们将创建一个基本的MFC...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值