zoukankan      html  css  js  c++  java
  • Coding with JMP3 CQ

    JMP3 is the best candidate to play mp3 audio files on the page. Here we go the files for JMP3.

    1. JMP3 plugin (jquery.jmp3.js)
    2. JQuery (jquery-1.7.2.min.js)
    3. Flash player (singlemp3player.swf)

    Configuration

    1. Copy jquery.jmp3.js, juqery.*.js, singlemp3player.swf to scripts folder or some other folder you like.
    2. Set the initial values for JMP3 in jquery.jmp3.js

    Let’s take scripts folder as example. After the aforementioned files are copied to scripts folder, you would like to open the jquery.mp3.js to set the initial values.

    jQuery.fn.jmp3 = function(passedOptions){
        // hard-wired options
        var playerpath = "/Scripts/";                    // SET THIS FIRST: path to singlemp3player.swf
    
        // passable options
        var options = {
            "filepath": "/Media/",                                        // path to MP3 file (default: current directory)
            "backcolor": "",                                    // background color
            "forecolor": "ffffff",                                // foreground color (buttons)
            "width": "25",                                        // width of player
            "repeat": "no",                                        // repeat mp3?
            "volume": "50",                                        // mp3 volume (0-100)
            "autoplay": "false",                                // play immediately on page load?
            "showdownload": "true",                                // show download button in player
            "showfilename": "true"                                // show .mp3 filename after player
        };
    

    The comments shipped with jquery.mp3.js states very clearly for the variable and fields. Since the singlemp3play.swf is located in the scripts folder, the palyerpath is set with “/Scripts/”.

    Another value worthy of pointing out is filepath in options object. The filepath in the options object combining with filename in jmp3 in the front page becomes the complete url path for the mp3 file. So you can leave filepath in the options object empty only if you specify the complete url path for the mp3 file in the front page. In the aforementioned code, I set filepath with “/Media/” since I place the mp3 files in the Media folder.

    Use JMP3 in the Front Page

    In the front page, please add the following code in the *.ascx or *.aspx.

    <script type="text/javascript" src="../Scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../Scripts/jquery.jmp3.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function () {
            //jMP3 init
            $(".mp3player").jmp3({
                showfilename: "false",
                backcolor: "000000",
                forecolor: "00ff00",
                 30,
                showdownload: "true"
            });
        });
    </script>
    
    <!—code snippet in a repeater—>
    <span id="mp3player" class="mp3player">
                        <%#Eval("RelativeMp3Url")%></span>
    

    In the aforementioned code, the mp3 url (filename) is put in a <span>. The mp3 audio player will display in the spans that have “mp3player” class.

    Is It A Bug?

    I found a strange issue in the repeater that contains multiple mp3 playing url. If the first occurrence of the mp3 url is not valid, the successive mp3 urls will not be represented with jmp3 player even if they have correct mp3 urls. I will appreciate if some jquery experts give the answer here.

    supported by Nova Umbraco

  • 相关阅读:
    Entity Framework Repository模式
    IoC之AutoFac(四)——AutoFac在MVC中的使用
    IoC之AutoFac(三)——生命周期
    IoC之AutoFac(二)——解析服务
    IoC之AutoFac(一)——简单使用和组件注册
    Ioc容器Autofac系列(1)-- 初窥
    Nop源码分析二
    Nop源码分析一
    基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
    JS函数设置默认参数值
  • 原文地址:https://www.cnblogs.com/czy/p/2524125.html
Copyright © 2011-2022 走看看