如何開發一個音樂播放器小程式?下面這篇文章跟大家介紹一下。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。
本文根據別人例子跟著做一個音樂播放器小程序,留下一個腳印吧。實作以下微信小程式的音樂播放器。
介面做的確實挺醜的,先上wxss檔
//index.wxss .button-style{ background-color: #eee; border-radius: 8rpx; margin: 20rpx; }
只是頂一個簡單的按鈕的圓角和間距,顏色這個我還是用primary這個小綠色。
下面是index.wxml檔
//index.wxml
#播放
#暫停
設定播放進
停止播放
取得播放狀
沒辦法,用開發者工具打出來就是這樣的醜格式
下面是重點index. js
//index.js //获取应用实例 var app = getApp() Page({ data:{ }, //播放 listenerButtonPlay:function(){ wx.playBackgroundAudio({ dataUrl: \'http://ac-5g9r20ds.clouddn.com/e54ad7f0a834b9c07ec6.mp3\', title:\'李宗盛\', //图片地址地址 coverImgUrl:\'http://ac-5g9r20ds.clouddn.com/63bedb5f584234b6827c.jpg\' }) }, //监听button暂停按钮 listenerButtonPause:function(){ wx.pauseBackgroundAudio({ }); console.log(\'暂停播放\') }, /** * 播放状态 */ listenerButtonGetPlayState:function(){ wx.getBackgroundAudioPlayerState({ success: function(res){ // success //duration 选定音频的长度(单位:s),只有在当前有音乐播放时返回 console.log(\'duration:\' + res.duration) console.log(\'currentPosition:\' + res.currentPosition) //status 播放状态(2:没有音乐在播放,1:播放中,0:暂停中) console.log(\'status:\' + res.status) console.log(\'downloadPercent:\' + res.downloadPercent) //dataUrl 歌曲数据链接,只有在当前有音乐播放时返回 console.log(\'dataUrl:\' + res.dataUrl) }, fail: function() { // fail }, complete: function() { // complete } }) }, /** * 设置进度 */ listenerButtonSeek:function(){ wx.seekBackgroundAudio({ position: 40 }) }, /** * 停止播放 */ listenerButtonStop:function(){ wx.stopBackgroundAudio({ }) console.log(\'停止播放\') }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 /** * 监听音乐播放 */ wx.onBackgroundAudioPlay(function() { // callback console.log(\'onBackgroundAudioPlay\') }) /** * 监听音乐暂停 */ wx.onBackgroundAudioPause(function() { // callback console.log(\'onBackgroundAudioPause\') }) /** * 监听音乐停止 */ wx.onBackgroundAudioStop(function() { // callback console.log(\'onBackgroundAudioStop\') }) } })
裡面可以先依照順序來看onLoad函數,裡面定義了三個監聽函數,可以看到console裡面效果如圖
小程式開發教學》
以上是如何開發一個音樂播放器小程式?的詳細內容。更多資訊請關注PHP中文網其他相關文章!
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影:貝殼謎語解決方案
2 週前ByDDD
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器

SublimeText3 Linux新版
SublimeText3 Linux最新版

ZendStudio 13.5.1 Mac
強大的PHP整合開發環境

SublimeText3 英文版
推薦:為Win版本,支援程式碼提示!

Atom編輯器mac版下載
最受歡迎的的開源編輯器