Today I will show you how to get information from the audio stream. But first, let’s look at the past. From time immemorial, music is one of the most revered arts. Listen to your favorite music is a pleasure to all of us. Our today’s article is directly related to music. As you know, there are many radio stations in the Internet, and anyone can create own radio station without any problem. Other people, listeners – can listen to these internet radio stations. Typically, the radiostation is a continuous audio stream, which broadcasts in one of the two most common protocols: Shoutcast or Icecast (that are Internet Broadcast servers). Long ago, we had to use various flash players to listen to these stations, but with the advent of html5, situation has changed. HTML5 introduced a new element: <audio> that allows us to work with audio.
From streams, we can get a variety of information: server info, title, description, audio type, bitrate, amount of listeners, genre, current playing artist name song, and other useful information. Besides that, in case of shoutbox, we can also get a history of recent songs. In the beginning of our article, you can find the result that we are going to achieve.
PHP
For a start, let’s review the work with Icecast. The Icecast server provides all statistics in status.xsl file. Thus we need to get it, and then parse it in order to get all the information. I prepared the following class that gathers this information (using CURL):
03 | var $stats_file = "/status.xsl"; |
04 | var $radio_info = array(); |
05 | function __construct() { |
07 | $this->radio_info['server'] = $this->server; |
08 | $this->radio_info['title'] = 'Offline'; |
09 | $this->radio_info['description'] = 'Radio offline'; |
10 | $this->radio_info['content_type'] = ''; |
11 | $this->radio_info['mount_start'] = ''; |
12 | $this->radio_info['bit_rate'] = ''; |
13 | $this->radio_info['listeners'] = ''; |
14 | $this->radio_info['most_listeners'] = ''; |
15 | $this->radio_info['genre'] = ''; |
16 | $this->radio_info['url'] = ''; |
17 | $this->radio_info['now_playing'] = array(); |
18 | $this->radio_info['now_playing']['artist'] = 'Unknown'; |
19 | $this->radio_info['now_playing']['track'] = 'Unknown'; |
21 | function setUrl($url) { |
23 | $this->radio_info['server'] = $this->server; |
25 | private function fetch() { |
29 | curl_setopt($ch,CURLOPT_URL, $this->server . $this->stats_file); |
31 | curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); |
33 | $output = curl_exec($ch); |
38 | function getStatus() { |
39 | $output = $this->fetch(); |
41 | $temp_array = array(); |
42 | $search_for = "<td\s[^>]*class=\"streamdata\">(.*)<\/td>"; |
43 | $search_td = array('<td class="streamdata">', '</td>'); |
44 | if (preg_match_all("/$search_for/siU", $output, $matches)) { |
45 | foreach ($matches[0] as $match) { |
46 | $to_push = str_replace($search_td, '', $match); |
47 | $to_push = trim($to_push); |
48 | array_push($temp_array, $to_push); |
51 | if (count($temp_array)) { |
53 | $this->radio_info['title'] = $temp_array[0]; |
54 | $this->radio_info['description'] = $temp_array[1]; |
55 | $this->radio_info['content_type'] = $temp_array[2]; |
56 | $this->radio_info['mount_start'] = $temp_array[3]; |
57 | $this->radio_info['bit_rate'] = $temp_array[4]; |
58 | $this->radio_info['listeners'] = $temp_array[5]; |
59 | $this->radio_info['most_listeners'] = $temp_array[6]; |
60 | $this->radio_info['genre'] = $temp_array[7]; |
61 | $this->radio_info['url'] = $temp_array[8]; |
62 | if (isset($temp_array[9])) { |
63 | $x = explode(" - ", $temp_array[9]); |
64 | $this->radio_info['now_playing']['artist'] = $x[0]; |
65 | $this->radio_info['now_playing']['track'] = $x[1]; |
68 | return $this->radio_info; |
Shoutcast server provides the information in other files: index.html contains general information like server status, stream status, amount of listeners, audio type, genre and current song. Besides of that information this server has another file: played.html that contains the song history information (that is pretty useful as well). I decided to display all possible values using ‘foreach’, here is my code:
02 | $html = file_get_contents(rtrim($url, '/').'/index.html'); |
04 | $dom = new domDocument; |
05 | $dom->loadHTML($html); |
07 | $tables = $dom->getElementsByTagName('table'); |
08 | $rows = $tables->item(3)->getElementsByTagName('tr'); |
09 | foreach ($rows as $row) { |
10 | $cols = $row->getElementsByTagName('td'); |
11 | if (!strstr($cols->item(0)->nodeValue,'@')) { |
12 | $result .= '<div><strong>' . $cols->item(0)->nodeValue . '</strong> ' . $cols->item(1)->nodeValue; |
13 | if ($cols->item(2)->nodeValue) |
14 | $result .= ' *'.$cols->item(2)->nodeValue.'*'; |
HTML
HTML is simple enough to understand:
04 | <meta charset="utf-8" /> |
05 | <meta property="og:site_name" content="Script Tutorials" /> |
06 | <meta property="og:title" content="Script to read information from audio stream | Script Tutorials" /> |
08 | <meta property="og:type" content="website" /> |
09 | <meta name="description" content="Script to read information from audio stream - Script Tutorials"> |
10 | <title>Script to read information from audio stream | Script Tutorials</title> |
11 | <link href="css/style.css" rel="stylesheet"> |
14 | <div class="container"> |
16 | <h1>Script to read information from audio stream |
17 | <span>Here you can put a stream URL to get it's details</span> |
20 | <label><span>Stream URL:</span><input type="url" name="url" placeholder="stream url" /></label> |
21 | <label><span>Stream type:</span> |
23 | <option value="s">Shoutcast</option> |
24 | <option value="i">Icecast</option> |
27 | <label><span> </span><input type="submit" class="button" value="Display info" /></label> |
Here we simply draw the form to get params (url and type) and display results
CSS
Finally, to make the result more pleasing – I prepared the following styles:
css/style.css
02 | font-family: 'Verdana', sans-serif; |
12 | padding: 20px 30px 20px 30px; |
15 | border:1px solid #DADADA; |
20 | border-bottom: 1px solid #DADADA; |
38 | form input[type="text"], input[type="url"], form input[type="email"], form textarea,form select{ |
39 | border: 1px solid #DADADA; |
44 | padding: 3px 3px 3px 5px; |
46 | font: normal 12px/12px; |
55 | padding: 10px 25px 10px 25px; |
[sociallocker]
[/sociallocker]
Conclusion
Today we finally taught you receive all the necessary information from the audio streams. That’s it for today, thanks for your attention. If you like what we have done today – share it with your friends in your social networks using the form below.