How to add music to a Web site

Source: Internet
Author: User

Discover a lot of personal blogs that have added background music to enhance the user experience. LZ collects two ways to add music to your site.

First, the Watercress FM

This is very simple and a piece of code can be implemented.

<p>    <iframe name= "Iframe_canvas"             src= "Http://douban.fm/partner/baidu/doubanradio"           height= " "Width=" "frameborder=" 0 "scrolling=" no ">    </iframe></p>

Effect:

Simple and practical, and can be experienced locally, quite good. But the look is a little bit worse and requires extra CSS control.

Second, the web version of the JavaScript plugin

There is a Ajaxsns Web API that is a web player. Calling code:

<script type= "Text/javascript" src= "Http://api.ajaxsns.com/music/tczPlayerApp.js" ></script> < Script type= "Text/javascript" >

Tczmusic.skin= "Red";         Tczmusic.post=["left", "top"];         tczmusic.posx=120;         tczmusic.posy=120; Tczmusic.show (); </script>

Effect: http://testmusic.sinaapp.com/

Compared to Mini, you can control your own code, including location, song tracks, etc. You can also call only one sentence: Tczmusic.show (), then everything is the default setting. However, it is not possible to test locally. The relevant parameters are as follows:

Set skin, default to red, you can set the skin to have: red
Tczmusic.skin= "Red";

Location: The following is the default setting, which means 20px from the right, from the bottom 20px position, post the 1th parameter can be left, right, the 2nd parameter can be top, bottom
Tczmusic.post=["Right", "bottom"];
tczmusic.posx=20;
tczmusic.posy=20;

Whether to adapt the screen and change the position with the scroll bar, the default is true to set: true, False
Tczmusic.roll=true;

Song list height, default is 240, can set range: 50-500
tczmusic.listht=300;

Whether to open the song list by default, False (off) to set: true, False
Tczmusic.listview=false;

Play the first song when open, default is 1
tczmusic.song=1;

Random play, default to True (Shuffle), set: True, False
Tczmusic.random=true;

Whether to loop playback, default to True (loop play), set: True, False
Tczmusic.loop=true;

Whether to play the song automatically, the default is True (AutoPlay), can be set: true, False
Tczmusic.autoplay=true;

Whether to turn on the memory playback function, the default is False (off), can be set: true, False
If the memory playback function is turned on, the last playback progress and play/pause status will be resumed when the page is refreshed or the next time the player is opened.
Tczmusic.saveplay=false;

Two songs separated by the time setting, the default is 3000 (in milliseconds 1000 milliseconds = 1 seconds), the recommended setting range: 1000-5000
tczmusic.spacetime=3000;

Set the song list, array format (no comma is required after the last song), do not set to enable default list, can be set to null: tczmusic.list=[];
tczmusic.list=[
["Song name", "singer Name", "Song Address"],
["Song name", "singer Name", "Song Address"]
];

Show player (basic parameters, you must set or execute this parameter before the player is enabled)
Tczmusic.show ();

Go and experience it, if you have a better, welcome recommendation. (*^◎^*)

How to add music to a Web site

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.