search
HomeWeChat AppletMini Program DevelopmentExample of WeChat applet using audio component to play music

We have shared a lot of tutorials about WeChat mini programs before. In this article, we mainly introduce the function of using the audio component of WeChat mini programs to play music, and analyze the operation skills related to the audio components of WeChat mini programs to play online music in the form of examples, and come with source code for Readers can download it for reference. Friends who need it can refer to it. I hope it can help everyone.

1. Effect display

##2. Key code

① index.wxml

Copy code The code is as follows:

<audio src="{{audioSrc}}" poster="{{audioPoster}}" name="{{audioName}}" author="{{audioAuthor}}" controls></audio>

② index.js

Page({
 data: {
   audioPoster: &#39;http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000&#39;,
   audioName: &#39;此时此刻&#39;,
   audioAuthor: &#39;许巍&#39;,
   audioSrc: &#39;http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46&#39;,
 }
})

Everyone can learn Yet? Hurry up and try it yourself.


Related recommendations:

Functional implementation of user-defined templates in WeChat mini program

WeChat mini program that implements the tab function Program

The most complete WeChat mini program project example

The above is the detailed content of Example of WeChat applet using audio component to play music. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
FiiO CP13 cassette player launches with transparent retro lookFiiO CP13 cassette player launches with transparent retro lookJun 16, 2024 am 09:52 AM

TheFiiOCP13cassetteplayerwasannouncedinJanuary.Now,FiiOisexpandingitsportfoliowithtwonewmodels-onewitharedfrontandonewithatransparentfront.Thelatternotonlyperfectlymatchestheretrocharmoftheangulardesign,butalso

小程序能用react吗小程序能用react吗Dec 29, 2022 am 11:06 AM

小程序能用react,其使用方法:1、基于“react-reconciler”实现一个渲染器,生成一个DSL;2、创建一个小程序组件,去解析和渲染DSL;3、安装npm,并执行开发者工具中的构建npm;4、在自己的页面中引入包,再利用api即可完成开发。

Klipsch unveils Flexus Core 300 flagship soundbar with 8K support, 12 speakers and room correctionKlipsch unveils Flexus Core 300 flagship soundbar with 8K support, 12 speakers and room correctionSep 05, 2024 am 10:16 AM

The Klipsch Flexus Core 300 is the top model in the series and is positioned above the already available Flexus Core 200 in the company's soundbar line-up. According to Klipsch, this is the first soundbar in the world whose sound can be adapted to th

Soundcore Space One Pro: Anker reveals most expensive over-ear headset to dateSoundcore Space One Pro: Anker reveals most expensive over-ear headset to dateJun 26, 2024 pm 03:07 PM

Anker offers both a broad product portfolio, which not only includes various product categories, but also numerous products within each category. Audio products are no exception in this respect, with Anker offering very affordable headsets as well as

Audio是指什么Audio是指什么Dec 25, 2023 pm 03:41 PM

Audio是指声音的波长、频率和强度。它是一种可以被人类听觉系统感知的信号,由物体振动产生。音频通常以波形的方式存在,可以记录、存储、传输和重放。,音频是一种重要的多媒体信息,在各种领域中得到应用。随着数字技术的发展,数字音频已经成为现代音乐制作和广播领域中的主流技术。同时,音频处理和数字化也是现代音频技术的重要方向之一,它们可以改善音质、提高声音清晰度、增强声音表现力等。

Anker Soundcore Liberty 4 Pro: Premium earbuds with barometer, spatial audio, noise supression and interactive charging caseAnker Soundcore Liberty 4 Pro: Premium earbuds with barometer, spatial audio, noise supression and interactive charging caseAug 13, 2024 pm 03:32 PM

Anker is developing new wireless earbuds, the Soundcore Liberty 4 Pro,which are aimed at users who are willing to dig a little deeper into their pockets for powerful features. There are currently no official details on price or availability, but unco

用Python编写简单的聊天程序教程用Python编写简单的聊天程序教程May 08, 2023 pm 06:37 PM

实现思路x01服务端的建立首先,在服务端,使用socket进行消息的接受,每接受一个socket的请求,就开启一个新的线程来管理消息的分发与接受,同时,又存在一个handler来管理所有的线程,从而实现对聊天室的各种功能的处理x02客户端的建立客户端的建立就要比服务端简单多了,客户端的作用只是对消息的发送以及接受,以及按照特定的规则去输入特定的字符从而实现不同的功能的使用,因此,在客户端这里,只需要去使用两个线程,一个是专门用于接受消息,一个是专门用于发送消息的至于为什么不用一个呢,那是因为,只

Doogee S punk: Rugged smartphone with powerful speakers, configurable LEDs and 10800 mAh batteryDoogee S punk: Rugged smartphone with powerful speakers, configurable LEDs and 10800 mAh batteryJun 14, 2024 am 09:12 AM

Doogeewillsoonbeofferinganewsmartphonewithauniquesellingpointintheformofalargespeakerontheback.Itisclearlynoticeableandvisuallydominatestheback.Themaximumoutputpowerisspecifiedas4watts,andaccordingtothemanufact

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft