微信小程序 :模仿酷狗音乐播放器等界面

news/2025/2/13 5:07:25/

也没啥。。。就设计师要求按照他的界面来画。。所以就没办法了

wxml代码:

<!--当前为停止状态  -->
<view style="width:250rpx;height:250rpx;left:250rpx;top:12rpx;position:relative;" wx:if="{{isplay==false}}" bindtap='play'><image style="width:100%;height:100%;border-radius:50%;" src='http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000' /><image src='../image/play.png' style="width:100rpx;height:100rpx;position:absolute;left:75rpx;top:75rpx;"></image>
</view>
<!--当前为播放状态  -->
<view style="width:250rpx;height:250rpx;left:250rpx;top:12rpx;position:relative;" wx:if="{{isplay==true}}" bindtap='stop'><image style="width:100%;height:100%;border-radius:50%;" src='http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000' /><image src='../image/stop.png' style="width:100rpx;height:100rpx;position:absolute;left:75rpx;top:75rpx;"></image>
</view>
<slider style="width:500rpx;margin-left:125rpx;" max='{{maxlength}}' min="0" step="1" value="{{value}}" bindchanging="changing" bindchange="change"></slider>

js代码:

const myaudio = wx.createInnerAudioContext();
var myintervi1;;
Page({data: {isplay: false,//是否播放haslength: false,//当前是否有音乐的长度maxlength: 0,value: 0,//当前播放到了哪儿},onShow: function () {myaudio.src = "http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46"this.getmusiclength();},//播放play: function () {const that = this;myaudio.play();//开始循环设置时间this.setData({ isplay: true });myintervi1 = setInterval(function () {var a = that.data.value;a++;that.setData({ value: a })}, 1000);},// 停止stop: function () {myaudio.pause();this.setData({ isplay: false });},//获取音乐的长度getmusiclength: function () {const that = this;console.log(myaudio.duration);if (myaudio.duration == 0) {setTimeout(function () {that.data.haslength = false;that.getmusiclength();}, 100);}else {var a = Math.ceil(myaudio.duration);that.setData({haslength: true,maxlength: a,value: 0});}},//拖动 结束后重新开始播放change: function (e) {const that = this;// 清除定时器clearInterval(myintervi1);this.setData({ value: e.detail.value });myaudio.seek(e.detail.value);myaudio.play();//累加刷新页面myintervi1 = setInterval(function () {var a = that.data.value;console.log(a);a++;that.setData({ value: a })}, 1000);},changing: function (e) {myaudio.pause();}})
差不多就这么点吧。也就是个雏形

http://www.ppmy.cn/news/627758.html

相关文章

基于动态手势识别的酷狗音乐播放器控制

动态手势识别控制酷狗音乐播放器&#xff0c;2011年第一天放上&#xff0c;算是给大家新年的祝福&#xff0c;新年快乐&#xff01; 操作演示&#xff1a;http://v.youku.com/v_show/id_XMjMzNzQzOTYw.html 这是手机录的像&#xff0c;声音比图像提前了两三秒吧&#xff0c;所…

截获网易云、酷狗、QQ音乐播放器桌面歌词画面心德

在直播项目中 需要捕获某个窗口的画面并共享 总结了如下几种场景中窗口的捕获方法 1、dc拷贝&#xff08;BitBlt、PrintWindow&#xff09; 这是最基本的方法 直接拿到窗口dc 然后从dc中拷贝窗口画面 可优先使用PrintWindow 因为该API可以捕获窗口超出桌面范围的区域。需要注意…

Python爬虫入门系列之Scrapy爬取Ajax网页

Python爬虫入门系列之Scrapy爬取Ajax网页 在前几篇博客中&#xff0c;我们学习了如何使用Scrapy框架爬取静态和动态网页。然而&#xff0c;有些网页使用Ajax技术加载数据&#xff0c;这就需要我们使用特殊的方法来获取这些网页的内容。本篇博客将介绍如何使用Scrapy爬取Ajax网页…

第4讲:使用ajax技术实现菜单展开或隐藏功能(xml数据)

使用ajax技术实现点击菜单时&#xff0c;展开当前子菜单列表&#xff0c;隐藏其他子菜单功能&#xff1b;前端使用静态html页面生成一级菜单&#xff0c;当点击某个菜单时&#xff0c;发送数据到后端(jsp文件)&#xff0c;利用responseXML返回xml格式文件&#xff0c;刷新二级菜…

大一新生应该如何学习C语言,书上代码看不懂理解不了怎么办?

大家好&#xff0c;我是二哥呀&#xff01; 昨天有个读者问我要 C语言的学习路线&#xff0c;他今年刚上大一&#xff0c;书上的代码完全看不懂。 讲真&#xff0c;大一新生&#xff0c;一般都是零基础的纯小白&#xff0c;看不懂书上的代码很正常&#xff0c;除非是小学、初中…

计算机代码大全,电脑运行代码大全

开始菜单中的“运行”是通向程序的快捷途径&#xff0c;输入特定的命令后&#xff0c;即可快速的打开Windows的大部分程序&#xff0c;熟练的运用它&#xff0c;将给我们的操作带来诸多便捷。 开始菜单--运行--CMD--输入指令 下面就是指令 winver 检查Windows版本 wmimgmt.msc …

笔记本电脑win10打开照相机显示灰色相机解决办法

(1&#xff09;WinR打开命令端&#xff0c;输入regedit运行&#xff1b; &#xff08;2&#xff09;进入HKEY_LOCAL_MACHINE \ SOFTWARE \ Microsoft \ Windows Media Foundation \ Platform&#xff1b; &#xff08;3&#xff09;新建DWORD(32位)值&#xff08;D&#xff09;…

扑捉和捕捉的区别照相_扑捉和捕捉的区别照相

捕捉与抓拍有什么区别 ______ 捕捉是在对象明确且有时间等待情况下进行的;抓拍是对象不明确且无意中拍到的, 对象捕捉与捕捉模式的重要区别是什么?_ ______ 对象捕捉是AutoCAD中最为重要的工具之一,使用对象捕捉可以精确定位,使用户在绘图过程中可直接利用光标来准确地确定目标…