Home  >  Article  >  Web Front-end  >  How to use audio components in WeChat mini programs

How to use audio components in WeChat mini programs

亚连
亚连Original
2018-06-21 18:25:322696browse

This article mainly introduces the function of using the audio component of the WeChat applet to play music, and analyzes the operation skills related to the audio component of the WeChat applet to play online music in the form of examples. It also comes with source code for readers to download and refer to. Friends who need it can refer to it.

The example in this article describes the WeChat applet's use of the audio component to play music. Share it with everyone for your reference, as follows:

Key code

① index.wxml

<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;,
 }
})

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

About this pointing problem in vue (detailed tutorial)

How to implement JSON data grouping optimization in Javascript

How to use axios to upload pictures with a progress bar function

How to use the Validate plug-in in jQuery

How to use js cookies to implement the shopping cart function

Detailed interpretation of the new features of Angular5.1

How to use vuex to implement menu management

How to use Vue to develop tree components

How to use Vue to develop a Sudoku game

Details Interpretation of webpack3 compilation compatible with IE8 (detailed tutorial)

How to implement the rename file function using node

How to convert bool value in js?

How to use refs positioning in vue

The above is the detailed content of How to use audio components in WeChat mini programs. 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