• Home

  • Custom Ecommerce
  • Application Development
  • Database Consulting
  • Cloud Hosting
  • Systems Integration
  • Legacy Business Systems
  • Security & Compliance
  • GIS

  • Expertise

  • About Us
  • Our Team
  • Clients
  • Blog
  • Careers

  • VisionPort

  • Contact
  • Our Blog

    Ongoing observations by End Point Dev people

    Simple audio playback with Yahoo Mediaplayer

    Jeff Boes

    By Jeff Boes
    October 20, 2010

    Recently I had need to show a list of MP3 files with a click-to-play interface.

    I came upon a very simple self-contained audio player:

    <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
    

    The code to set up my links for playing was dirt-simple:

    <script type="text/javascript">
    var player = document.getElementById('player');
    function add_to_player() {
        var link = this;
        player.src.replace(/audioUrl=.*/,'audioUrl=' + link.src);
        return false;
    }
    var links = document.getElementsByTagName('A');
    for (var i = 0; i < links.length; i++) {
        if (links[i].src.match(/\.mp3$/)) {
            links.onclick = add_to_player;
        }
    }
    </script>
    

    You could use various ways to identify the links to be player-ized, but I chose to just associate the links with a class, “mp3”:

    <a class="mp3" href="/path/to/file.mp3">Audio File 1</a>
    

    Obviously, if jQuery is in use for your page, you can reduce the code to an even smaller snippet.

    javascript audio


    Comments